\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0627\u0644\u0645\u0633\u0644\u064a\u0629 | \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (\u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n direction: rtl;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6366f1; }\r\n input[type=\"range\"] {\r\n direction: ltr;\r\n -webkit-appearance: none;\r\n background: #334155;\r\n height: 4px;\r\n border-radius: 5px;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 16px;\r\n width: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .ltr { direction: ltr; text-align: left; }\r\n .ltr-inline { direction: ltr; display: inline-block; }\r\n button {\r\n transition: all 0.2s ease;\r\n }\r\n .simulation-container {\r\n margin: 1.5rem 0;\r\n padding: 1rem;\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 <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n \r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (Draft Mark & Load Line)<\/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 \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__\u0627\u0644\u063a\u0627\u0637\u0633_\u0648\u062e\u0637_\u0627\u0644\u062a\u062d\u0645\u064a\u0644_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__\u0627\u0644\u063a\u0627\u0637\u0633_\u0648\u062e\u0637_\u0627\u0644\u062a\u062d\u0645\u064a\u0644_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0634\u0631\u062d \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0639\u0644\u0649 \u0627\u0644\u0633\u0641\u0646<\/h2>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border border-blue-500\/30\">\r\n <p class=\"text-base text-slate-300 leading-relaxed\">\u062a\u0639\u062a\u0645\u062f \u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0633\u0641\u0646 \u0627\u0644\u0636\u062e\u0645\u0629 \u0641\u064a \u0627\u0644\u0628\u062d\u0627\u0631 \u0639\u0644\u0649 \u0639\u0644\u0627\u0645\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u0645\u0631\u0633\u0648\u0645\u0629 \u0639\u0644\u0649 \u0647\u064a\u0627\u0643\u0644\u0647\u0627\u060c \u062a\u0633\u062a\u0646\u062f \u0645\u0628\u0627\u0634\u0631\u0629 \u0625\u0644\u0649 <strong class=\"text-white\">\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633<\/strong> \u0648\u0642\u0648\u0629 \u0627\u0644\u0637\u0641\u0648\u060c \u0644\u062d\u0645\u0627\u064a\u062a\u0647\u0627 \u0645\u0646 \u0627\u0644\u063a\u0631\u0642 \u0628\u0633\u0628\u0628 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0632\u0627\u0626\u062f\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u063a\u0627\u0637\u0633 (Draft Mark)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\"><strong class=\"text-white\">\u0627\u0644\u063a\u0627\u0637\u0633 (Draft):<\/strong> \u0647\u0648 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0631\u0623\u0633\u064a\u0629 \u0628\u064a\u0646 \u0623\u0633\u0641\u0644 \u0647\u064a\u0643\u0644 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 (\u0627\u0644\u0642\u0627\u0639) \u0648\u062e\u0637 \u0627\u0644\u0645\u0627\u0621. \u062a\u064f\u0637\u0644\u0649 \u0647\u0630\u0647 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0628\u0623\u0631\u0642\u0627\u0645 \u0639\u0644\u0649 \u0645\u0642\u062f\u0645 \u0648\u0645\u0624\u062e\u0631 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0644\u062a\u062d\u062f\u064a\u062f \u0645\u062f\u0649 \u0639\u0645\u0642 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0645\u063a\u0645\u0648\u0631.<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-3\">\r\n <div class=\"bg-black\/30 p-2 rounded-lg\"><h3 class=\"font-bold text-blue-300\">\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0639\u0645\u0642 \u0627\u0644\u0622\u0645\u0646<\/h3><p class=\"text-slate-300 text-l\">\u064a\u0645\u0646\u0639 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u0627\u0635\u0637\u062f\u0627\u0645 \u0628\u0627\u0644\u0642\u0627\u0639 \u0641\u064a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0636\u062d\u0644\u0629.<\/p><\/div>\r\n <div class=\"bg-black\/30 p-2 rounded-lg\"><h3 class=\"font-bold text-blue-300\">\u062d\u0633\u0627\u0628 \u0627\u0644\u062d\u0645\u0648\u0644\u0629<\/h3><p class=\"text-slate-300 text-l\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u0642\u064a\u0627\u0633 \u0648\u0632\u0646 \u0627\u0644\u0628\u0636\u0627\u0626\u0639 \u0627\u0644\u062a\u064a \u062a\u0645 \u062a\u062d\u0645\u064a\u0644\u0647\u0627 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u063a\u0627\u0637\u0633.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (Load Line) - \u062e\u0637 \u0628\u0644\u064a\u0645\u0633\u0648\u0644<\/h2>\r\n <div class=\"bg-rose-900\/20 p-4 rounded-lg border border-rose-500\/30\">\r\n <p class=\"text-l text-rose-100\/80\">\u064a\u062d\u062f\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u0637 \u0623\u0642\u0635\u0649 \u0639\u0645\u0642 \u0622\u0645\u0646 \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u063a\u0648\u0635 \u0625\u0644\u064a\u0647 \u0627\u0644\u0633\u0641\u064a\u0646\u0629. \u0633\u064f\u0645\u064a \u0628\u0627\u0633\u0645 <strong class=\"text-white\">\u0635\u0645\u0648\u064a\u0644 \u0628\u0644\u064a\u0645\u0633\u0648\u0644<\/strong> \u0627\u0644\u0630\u064a \u0646\u0627\u0636\u0644 \u0644\u0625\u0644\u0632\u0627\u0645 \u0627\u0644\u0633\u0641\u0646 \u0628\u0648\u0636\u0639 \u0647\u0630\u0647 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0644\u0645\u0646\u0639 \u0627\u0644\u063a\u0631\u0642 \u0628\u0633\u0628\u0628 \u0627\u0644\u062c\u0634\u0639 \u0648\u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0632\u0627\u0626\u062f\u0629.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"ship-load-simulation\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0644\u0641 \u0627\u0644\u062e\u0637\u0648\u0637\u061f (\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0643\u062b\u0627\u0641\u0629)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30\">\r\n <p class=\"text-l text-amber-100\/80\">\u062a\u062a\u063a\u064a\u0631 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621 \u062d\u0633\u0628 \u0627\u0644\u0645\u0644\u0648\u062d\u0629 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0648\u0644\u0630\u0644\u0643 \u062a\u064f\u0631\u0633\u0645 \u0639\u062f\u0629 \u062e\u0637\u0648\u0637:<\/p>\r\n <div class=\"overflow-x-auto mt-3\">\r\n <table class=\"w-full text-l text-right text-slate-300\">\r\n <thead class=\"bg-white\/10\"><tr><th class=\"px-3 py-2\">\u0627\u0644\u0631\u0645\u0632<\/th><th class=\"px-3 py-2\">\u0627\u0644\u0645\u0639\u0646\u0649<\/th><th class=\"px-3 py-2\">\u0627\u0644\u0633\u0628\u0628 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a<\/th><\/tr><\/thead>\r\n <tbody class=\"divide-y divide-white\/10\">\r\n <tr><td class=\"px-3 py-2 font-bold text-white\">F<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0639\u0630\u0628\u0629<\/td><td class=\"px-3 py-2\">\u0643\u062b\u0627\u0641\u0629 \u0623\u0642\u0644 (1000 kg\/m\u00b3)\u060c \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u062a\u063a\u0648\u0635 \u0623\u0643\u062b\u0631.<\/td><\/tr>\r\n <tr><td class=\"px-3 py-2 font-bold text-white\">S<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0635\u064a\u0641 (Summer)<\/td><td class=\"px-3 py-2\">\u0627\u0644\u062e\u0637 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0644\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0645\u0627\u0644\u062d\u0629 \u0627\u0644\u0645\u0639\u062a\u062f\u0644\u0629.<\/td><\/tr>\r\n <tr><td class=\"px-3 py-2 font-bold text-white\">W<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0634\u062a\u0627\u0621 (Winter)<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0645\u064a\u0627\u0647 \u0623\u0643\u062b\u0631 \u0643\u062b\u0627\u0641\u0629\u060c \u0644\u0643\u0646 \u0627\u0644\u0623\u0645\u0648\u0627\u062c \u0623\u062e\u0637\u0631 (\u0647\u0627\u0645\u0634 \u0623\u0645\u0627\u0646 \u0623\u0643\u0628\u0631).<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633<\/h2>\r\n <div class=\"bg-emerald-900\/20 p-4 rounded-lg border border-emerald-500\/30\">\r\n <p class=\"text-l text-emerald-100\/80\">\u0642\u0648\u0629 \u0627\u0644\u0637\u0641\u0648 \u062a\u0633\u0627\u0648\u064a \u0648\u0632\u0646 \u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u0632\u0627\u062d. \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0637\u0627\u0641\u064a\u0629:<\/p>\r\n <div class=\"text-center my-2 font-mono text-emerald-400 text-xl\">\u03c1<sub>f<\/sub> \u00d7 V<sub>sub<\/sub> = m<sub>total<\/sub><\/div>\r\n <p class=\"text-l text-emerald-100\/80\">\u0639\u0646\u062f \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 (m<sub>total<\/sub>)\u060c \u064a\u062c\u0628 \u0623\u0646 \u064a\u0632\u062f\u0627\u062f \u062d\u062c\u0645 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0645\u063a\u0645\u0648\u0631 (V<sub>sub<\/sub>) \u0644\u062a\u0628\u0642\u0649 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0637\u0627\u0641\u064a\u0629\u060c \u0648\u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u063a\u0627\u0637\u0633. \u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u064a\u0636\u0645\u0646 \u0639\u062f\u0645 \u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u062d\u062f \u0627\u0644\u0630\u064a \u064a\u062c\u0639\u0644 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u063a\u064a\u0631 \u0645\u0633\u062a\u0642\u0631\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0633\u0626\u0644\u0629 \u0644\u0644\u062a\u0641\u0643\u064a\u0631<\/h2>\r\n <div class=\"space-y-3\">\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/10\">\r\n <p class=\"text-l text-slate-300\">1. \u0644\u0645\u0627\u0630\u0627 \u064a\u0642\u0639 \u062e\u0637 \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0639\u0630\u0628\u0629 (F) \u0623\u0633\u0641\u0644 \u062e\u0637 \u0627\u0644\u0635\u064a\u0641 (S) \u0639\u0644\u0649 \u0647\u064a\u0643\u0644 \u0627\u0644\u0633\u0641\u064a\u0646\u0629\u061f<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/10\">\r\n <p class=\"text-l text-slate-300\">2. \u0643\u064a\u0641 \u064a\u0633\u0627\u0639\u062f \u0642\u064a\u0627\u0633 \u0627\u0644\u063a\u0627\u0637\u0633 \u0642\u0628\u0644 \u0648\u0628\u0639\u062f \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0641\u064a \u0645\u0646\u0639 \u0627\u0644\u062a\u0644\u0627\u0639\u0628 \u0628\u0623\u0648\u0632\u0627\u0646 \u0627\u0644\u0628\u0636\u0627\u0626\u0639\u061f<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/10\">\r\n <p class=\"text-l text-slate-300\">3. \u0645\u0627 \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0621 \u0648\u0645\u0633\u062a\u0648\u0649 \u0637\u0641\u0648 \u0627\u0644\u0633\u0641\u064a\u0646\u0629\u061f<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0625\u062b\u0631\u0627\u0626\u064a<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\">\u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u062a\u0637\u0628\u064a\u0642\u0627\u0646 \u0639\u0645\u0644\u064a\u0627\u0646 \u062d\u064a\u0648\u064a\u0627\u0646 \u0644\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633. \u0641\u0647\u0645\u0627 \u064a\u0636\u0645\u0646\u0627\u0646 \u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0645\u0644\u0627\u062d\u0629 \u0627\u0644\u0628\u062d\u0631\u064a\u0629 \u0639\u0628\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0642\u0635\u0648\u0649 \u0627\u0644\u0622\u0645\u0646\u0629 \u0644\u0644\u0633\u0641\u0646 \u0645\u0639 \u0645\u0631\u0627\u0639\u0627\u0629 \u0627\u062e\u062a\u0644\u0627\u0641 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u064a\u0627\u0647 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629. \u0641\u0647\u0645 \u0647\u0630\u0647 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u064a\u0633\u0627\u0639\u062f \u0641\u064a \u0645\u0646\u0639 \u0627\u0644\u0643\u0648\u0627\u0631\u062b \u0627\u0644\u0628\u062d\u0631\u064a\u0629 \u0627\u0644\u0646\u0627\u062a\u062c\u0629 \u0639\u0646 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0632\u0627\u0626\u062f\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ============================================\r\n \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (Ship Load Simulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('ship-load-simulation');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (\u0628\u0644\u064a\u0645\u0633\u0648\u0644)<\/h3>\r\n <div class=\"flex flex-col md:flex-row justify-between items-center mb-6 gap-4\">\r\n <div class=\"flex gap-2\">\r\n <button id=\"water-salt\" class=\"px-4 py-2 rounded-lg text-l font-bold transition-all bg-blue-600 text-white\">\u0645\u064a\u0627\u0647 \u0645\u0627\u0644\u062d\u0629 (\u0627\u0644\u0628\u062d\u0631)<\/button>\r\n <button id=\"water-fresh\" class=\"px-4 py-2 rounded-lg text-l font-bold transition-all bg-slate-800 text-slate-400\">\u0645\u064a\u0627\u0647 \u0639\u0630\u0628\u0629 (\u0646\u0647\u0631)<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n <div class=\"lg:col-span-3 relative h-80 bg-gradient-to-b from-sky-400\/20 to-blue-900\/40 rounded-xl overflow-hidden border border-slate-800 flex items-end justify-center\">\r\n <div id=\"water-level\" class=\"absolute bottom-0 w-full bg-blue-500\/40 backdrop-blur-l z-10 transition-all duration-300\" style=\"height: 40%\">\r\n <div class=\"absolute top-0 w-full h-4 bg-white\/20 animate-pulse\"><\/div>\r\n <\/div>\r\n <div id=\"ship-container\" class=\"relative z-20 flex flex-col items-center\" style=\"transform: translateY(0px); transition: transform 0.3s ease-out\">\r\n <div class=\"w-64 h-40 bg-slate-800 rounded-b-[40px] border-x-4 border-b-4 border-slate-700 relative\">\r\n <div class=\"absolute -top-10 left-1\/2 -translate-x-1\/2 w-40 h-10 bg-slate-700 rounded-t-lg\">\r\n <div class=\"absolute top-2 left-4 w-8 h-4 bg-slate-600\"><\/div>\r\n <div class=\"absolute top-2 right-4 w-8 h-4 bg-slate-600\"><\/div>\r\n <\/div>\r\n <div class=\"absolute left-2 top-0 h-full flex flex-col justify-between py-2 text-[8px] font-mono text-amber-400\/60\">\r\n <span>10m \u2014<\/span><span>9m \u2014<\/span><span>8m \u2014<\/span><span>7m \u2014<\/span><span>6m \u2014<\/span><span>5m \u2014<\/span><span>4m \u2014<\/span><span>3m \u2014<\/span><span>2m \u2014<\/span><span>1m \u2014<\/span>\r\n <\/div>\r\n <div class=\"absolute right-0 top-1\/2 -translate-y-1\/2 flex items-center\">\r\n <div class=\"w-8 h-px bg-rose-500\"><\/div>\r\n <div class=\"w-4 h-4 border-2 border-rose-500 rounded-full flex items-center justify-center\">\r\n <div class=\"w-6 h-px bg-rose-500\"><\/div>\r\n <\/div>\r\n <span class=\"text-[8px] text-rose-400 mr-1 font-bold\">S<\/span>\r\n <\/div>\r\n <div id=\"cargo-container\" class=\"absolute inset-x-4 bottom-4 flex flex-wrap-reverse gap-1 justify-center\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute top-4 left-4 flex flex-col gap-2\">\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-blue-500\"><\/div><span id=\"water-density-label\" class=\"text-[10px] text-slate-300\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621: 1025 kg\/m\u00b3<\/span><\/div>\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-amber-600\"><\/div><span id=\"load-label\" class=\"text-[10px] text-slate-300\">\u0627\u0644\u062d\u0645\u0648\u0644\u0629: 5000 \u0637\u0646<\/span><\/div>\r\n <\/div>\r\n <div id=\"warning-overlay\" class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 z-50 bg-rose-600 text-white px-4 py-2 rounded-lg shadow-2xl flex items-center gap-2 hidden\">\r\n <span class=\"text-l font-bold\">\u062a\u062d\u0630\u064a\u0631: \u062a\u062c\u0627\u0648\u0632 \u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0622\u0645\u0646!<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-white\/5\">\r\n <label class=\"text-l text-slate-400 block mb-2 flex justify-between\">\r\n <span>\u0648\u0632\u0646 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 (\u0637\u0646)<\/span>\r\n <span id=\"load-value\" class=\"text-amber-400 font-bold\">5000 t<\/span>\r\n <\/label>\r\n <input id=\"load-slider\" type=\"range\" min=\"0\" max=\"10000\" step=\"500\" value=\"5000\" class=\"w-full accent-amber-500\">\r\n <\/div>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-xl border border-blue-500\/30\">\r\n <h4 class=\"text-blue-400 font-bold mb-2 text-l\">\u0645\u0644\u0627\u062d\u0638\u0629 \u0627\u0644\u0643\u062b\u0627\u0641\u0629:<\/h4>\r\n <p class=\"text-[10px] text-slate-300 leading-relaxed\">\u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u062a\u063a\u0648\u0635 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 <strong class=\"text-white\">\u0623\u0643\u062b\u0631<\/strong> \u0641\u064a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0639\u0630\u0628\u0629 \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u0627\u0644\u0645\u0627\u0644\u062d\u0629 \u0644\u0646\u0641\u0633 \u0627\u0644\u0648\u0632\u0646\u060c \u0644\u0623\u0646 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0639\u0630\u0628 \u0623\u0642\u0644.<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-slate-800\/30 rounded-xl border border-white\/5\">\r\n <div class=\"flex items-center gap-2 mb-2\">\r\n <span class=\"text-l font-bold text-white\">\u0627\u0644\u063a\u0627\u0637\u0633 \u0627\u0644\u062d\u0627\u0644\u064a:<\/span>\r\n <\/div>\r\n <div id=\"draft-display\" class=\"text-lg font-bold text-center text-white\">13.01 <span class=\"text-l text-slate-500\">\u0645\u062a\u0631<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let load = 5000;\r\n let waterType = 'salt';\r\n const shipBaseMass = 5000;\r\n const areaFactor = 150;\r\n const saltDensity = 1025;\r\n const freshDensity = 1000;\r\n\r\n const saltBtn = document.getElementById('water-salt');\r\n const freshBtn = document.getElementById('water-fresh');\r\n const loadSlider = document.getElementById('load-slider');\r\n const loadValueSpan = document.getElementById('load-value');\r\n const loadLabelSpan = document.getElementById('load-label');\r\n const densityLabelSpan = document.getElementById('water-density-label');\r\n const draftDisplay = document.getElementById('draft-display');\r\n const warningOverlay = document.getElementById('warning-overlay');\r\n const waterLevelDiv = document.getElementById('water-level');\r\n const shipContainer = document.getElementById('ship-container');\r\n const cargoContainer = document.getElementById('cargo-container');\r\n\r\n function calculateDraft() {\r\n const totalMassKg = (shipBaseMass + load) * 1000;\r\n const density = waterType === 'salt' ? saltDensity : freshDensity;\r\n const volumeSubmerged = totalMassKg \/ density;\r\n return volumeSubmerged \/ areaFactor;\r\n }\r\n\r\n function updateSimulation() {\r\n const draft = calculateDraft();\r\n const density = waterType === 'salt' ? saltDensity : freshDensity;\r\n const totalMass = shipBaseMass + load;\r\n\r\n loadValueSpan.innerText = load + ' t';\r\n loadLabelSpan.innerText = `\u0627\u0644\u062d\u0645\u0648\u0644\u0629: ${load} \u0637\u0646`;\r\n densityLabelSpan.innerText = `\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621: ${density} kg\/m\u00b3`;\r\n draftDisplay.innerHTML = draft.toFixed(2) + ' <span class=\"text-l text-slate-500\">\u0645\u062a\u0631<\/span>';\r\n\r\n const summerDraft = (10000 * 1000) \/ (saltDensity * areaFactor);\r\n if (draft > summerDraft * 1.05) {\r\n warningOverlay.classList.remove('hidden');\r\n } else {\r\n warningOverlay.classList.add('hidden');\r\n }\r\n\r\n const maxDraftForDisplay = 20;\r\n const waterHeightPercent = Math.min(100, (draft \/ maxDraftForDisplay) * 100);\r\n waterLevelDiv.style.height = `${waterHeightPercent}%`;\r\n\r\n const maxOffset = 60;\r\n const yOffset = Math.min(maxOffset, (draft \/ maxDraftForDisplay) * maxOffset);\r\n shipContainer.style.transform = `translateY(${yOffset}px)`;\r\n\r\n const numBoxes = Math.floor(load \/ 500);\r\n cargoContainer.innerHTML = '';\r\n for (let i = 0; i < numBoxes; i++) {\r\n const box = document.createElement('div');\r\n box.className = 'w-6 h-6 bg-amber-600 rounded-l border border-amber-800';\r\n cargoContainer.appendChild(box);\r\n }\r\n }\r\n\r\n saltBtn.addEventListener('click', () => {\r\n waterType = 'salt';\r\n saltBtn.classList.add('bg-blue-600', 'text-white');\r\n saltBtn.classList.remove('bg-slate-800', 'text-slate-400');\r\n freshBtn.classList.remove('bg-sky-600', 'text-white');\r\n freshBtn.classList.add('bg-slate-800', 'text-slate-400');\r\n updateSimulation();\r\n });\r\n\r\n freshBtn.addEventListener('click', () => {\r\n waterType = 'fresh';\r\n freshBtn.classList.add('bg-sky-600', 'text-white');\r\n freshBtn.classList.remove('bg-slate-800', 'text-slate-400');\r\n saltBtn.classList.remove('bg-blue-600', 'text-white');\r\n saltBtn.classList.add('bg-slate-800', 'text-slate-400');\r\n updateSimulation();\r\n });\r\n\r\n loadSlider.addEventListener('input', (e) => {\r\n load = parseInt(e.target.value);\r\n updateSimulation();\r\n });\r\n\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-18514","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18514","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=18514"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18514\/revisions"}],"predecessor-version":[{"id":18515,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18514\/revisions\/18515"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0627\u0644\u0645\u0633\u0644\u064a\u0629 | \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (\u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n direction: rtl;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6366f1; }\r\n input[type=\"range\"] {\r\n direction: ltr;\r\n -webkit-appearance: none;\r\n background: #334155;\r\n height: 4px;\r\n border-radius: 5px;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 16px;\r\n width: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .ltr { direction: ltr; text-align: left; }\r\n .ltr-inline { direction: ltr; display: inline-block; }\r\n button {\r\n transition: all 0.2s ease;\r\n }\r\n .simulation-container {\r\n margin: 1.5rem 0;\r\n padding: 1rem;\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 <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n \r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (Draft Mark & Load Line)<\/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 \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__\u0627\u0644\u063a\u0627\u0637\u0633_\u0648\u062e\u0637_\u0627\u0644\u062a\u062d\u0645\u064a\u0644_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__\u0627\u0644\u063a\u0627\u0637\u0633_\u0648\u062e\u0637_\u0627\u0644\u062a\u062d\u0645\u064a\u0644_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0634\u0631\u062d \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0639\u0644\u0649 \u0627\u0644\u0633\u0641\u0646<\/h2>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border border-blue-500\/30\">\r\n <p class=\"text-base text-slate-300 leading-relaxed\">\u062a\u0639\u062a\u0645\u062f \u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0633\u0641\u0646 \u0627\u0644\u0636\u062e\u0645\u0629 \u0641\u064a \u0627\u0644\u0628\u062d\u0627\u0631 \u0639\u0644\u0649 \u0639\u0644\u0627\u0645\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u0645\u0631\u0633\u0648\u0645\u0629 \u0639\u0644\u0649 \u0647\u064a\u0627\u0643\u0644\u0647\u0627\u060c \u062a\u0633\u062a\u0646\u062f \u0645\u0628\u0627\u0634\u0631\u0629 \u0625\u0644\u0649 <strong class=\"text-white\">\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633<\/strong> \u0648\u0642\u0648\u0629 \u0627\u0644\u0637\u0641\u0648\u060c \u0644\u062d\u0645\u0627\u064a\u062a\u0647\u0627 \u0645\u0646 \u0627\u0644\u063a\u0631\u0642 \u0628\u0633\u0628\u0628 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0632\u0627\u0626\u062f\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u063a\u0627\u0637\u0633 (Draft Mark)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\"><strong class=\"text-white\">\u0627\u0644\u063a\u0627\u0637\u0633 (Draft):<\/strong> \u0647\u0648 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0631\u0623\u0633\u064a\u0629 \u0628\u064a\u0646 \u0623\u0633\u0641\u0644 \u0647\u064a\u0643\u0644 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 (\u0627\u0644\u0642\u0627\u0639) \u0648\u062e\u0637 \u0627\u0644\u0645\u0627\u0621. \u062a\u064f\u0637\u0644\u0649 \u0647\u0630\u0647 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0628\u0623\u0631\u0642\u0627\u0645 \u0639\u0644\u0649 \u0645\u0642\u062f\u0645 \u0648\u0645\u0624\u062e\u0631 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0644\u062a\u062d\u062f\u064a\u062f \u0645\u062f\u0649 \u0639\u0645\u0642 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0645\u063a\u0645\u0648\u0631.<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-3\">\r\n <div class=\"bg-black\/30 p-2 rounded-lg\"><h3 class=\"font-bold text-blue-300\">\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0639\u0645\u0642 \u0627\u0644\u0622\u0645\u0646<\/h3><p class=\"text-slate-300 text-l\">\u064a\u0645\u0646\u0639 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u0627\u0635\u0637\u062f\u0627\u0645 \u0628\u0627\u0644\u0642\u0627\u0639 \u0641\u064a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0636\u062d\u0644\u0629.<\/p><\/div>\r\n <div class=\"bg-black\/30 p-2 rounded-lg\"><h3 class=\"font-bold text-blue-300\">\u062d\u0633\u0627\u0628 \u0627\u0644\u062d\u0645\u0648\u0644\u0629<\/h3><p class=\"text-slate-300 text-l\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u0642\u064a\u0627\u0633 \u0648\u0632\u0646 \u0627\u0644\u0628\u0636\u0627\u0626\u0639 \u0627\u0644\u062a\u064a \u062a\u0645 \u062a\u062d\u0645\u064a\u0644\u0647\u0627 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u063a\u0627\u0637\u0633.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (Load Line) - \u062e\u0637 \u0628\u0644\u064a\u0645\u0633\u0648\u0644<\/h2>\r\n <div class=\"bg-rose-900\/20 p-4 rounded-lg border border-rose-500\/30\">\r\n <p class=\"text-l text-rose-100\/80\">\u064a\u062d\u062f\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u0637 \u0623\u0642\u0635\u0649 \u0639\u0645\u0642 \u0622\u0645\u0646 \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u063a\u0648\u0635 \u0625\u0644\u064a\u0647 \u0627\u0644\u0633\u0641\u064a\u0646\u0629. \u0633\u064f\u0645\u064a \u0628\u0627\u0633\u0645 <strong class=\"text-white\">\u0635\u0645\u0648\u064a\u0644 \u0628\u0644\u064a\u0645\u0633\u0648\u0644<\/strong> \u0627\u0644\u0630\u064a \u0646\u0627\u0636\u0644 \u0644\u0625\u0644\u0632\u0627\u0645 \u0627\u0644\u0633\u0641\u0646 \u0628\u0648\u0636\u0639 \u0647\u0630\u0647 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0644\u0645\u0646\u0639 \u0627\u0644\u063a\u0631\u0642 \u0628\u0633\u0628\u0628 \u0627\u0644\u062c\u0634\u0639 \u0648\u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0632\u0627\u0626\u062f\u0629.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"ship-load-simulation\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0644\u0641 \u0627\u0644\u062e\u0637\u0648\u0637\u061f (\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0643\u062b\u0627\u0641\u0629)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30\">\r\n <p class=\"text-l text-amber-100\/80\">\u062a\u062a\u063a\u064a\u0631 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621 \u062d\u0633\u0628 \u0627\u0644\u0645\u0644\u0648\u062d\u0629 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0648\u0644\u0630\u0644\u0643 \u062a\u064f\u0631\u0633\u0645 \u0639\u062f\u0629 \u062e\u0637\u0648\u0637:<\/p>\r\n <div class=\"overflow-x-auto mt-3\">\r\n <table class=\"w-full text-l text-right text-slate-300\">\r\n <thead class=\"bg-white\/10\"><tr><th class=\"px-3 py-2\">\u0627\u0644\u0631\u0645\u0632<\/th><th class=\"px-3 py-2\">\u0627\u0644\u0645\u0639\u0646\u0649<\/th><th class=\"px-3 py-2\">\u0627\u0644\u0633\u0628\u0628 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a<\/th><\/tr><\/thead>\r\n <tbody class=\"divide-y divide-white\/10\">\r\n <tr><td class=\"px-3 py-2 font-bold text-white\">F<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0639\u0630\u0628\u0629<\/td><td class=\"px-3 py-2\">\u0643\u062b\u0627\u0641\u0629 \u0623\u0642\u0644 (1000 kg\/m\u00b3)\u060c \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u062a\u063a\u0648\u0635 \u0623\u0643\u062b\u0631.<\/td><\/tr>\r\n <tr><td class=\"px-3 py-2 font-bold text-white\">S<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0635\u064a\u0641 (Summer)<\/td><td class=\"px-3 py-2\">\u0627\u0644\u062e\u0637 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0644\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0645\u0627\u0644\u062d\u0629 \u0627\u0644\u0645\u0639\u062a\u062f\u0644\u0629.<\/td><\/tr>\r\n <tr><td class=\"px-3 py-2 font-bold text-white\">W<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0634\u062a\u0627\u0621 (Winter)<\/td><td class=\"px-3 py-2\">\u0627\u0644\u0645\u064a\u0627\u0647 \u0623\u0643\u062b\u0631 \u0643\u062b\u0627\u0641\u0629\u060c \u0644\u0643\u0646 \u0627\u0644\u0623\u0645\u0648\u0627\u062c \u0623\u062e\u0637\u0631 (\u0647\u0627\u0645\u0634 \u0623\u0645\u0627\u0646 \u0623\u0643\u0628\u0631).<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633<\/h2>\r\n <div class=\"bg-emerald-900\/20 p-4 rounded-lg border border-emerald-500\/30\">\r\n <p class=\"text-l text-emerald-100\/80\">\u0642\u0648\u0629 \u0627\u0644\u0637\u0641\u0648 \u062a\u0633\u0627\u0648\u064a \u0648\u0632\u0646 \u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u0632\u0627\u062d. \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0637\u0627\u0641\u064a\u0629:<\/p>\r\n <div class=\"text-center my-2 font-mono text-emerald-400 text-xl\">\u03c1<sub>f<\/sub> \u00d7 V<sub>sub<\/sub> = m<sub>total<\/sub><\/div>\r\n <p class=\"text-l text-emerald-100\/80\">\u0639\u0646\u062f \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 (m<sub>total<\/sub>)\u060c \u064a\u062c\u0628 \u0623\u0646 \u064a\u0632\u062f\u0627\u062f \u062d\u062c\u0645 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0645\u063a\u0645\u0648\u0631 (V<sub>sub<\/sub>) \u0644\u062a\u0628\u0642\u0649 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u0637\u0627\u0641\u064a\u0629\u060c \u0648\u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u063a\u0627\u0637\u0633. \u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u064a\u0636\u0645\u0646 \u0639\u062f\u0645 \u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u062d\u062f \u0627\u0644\u0630\u064a \u064a\u062c\u0639\u0644 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 \u063a\u064a\u0631 \u0645\u0633\u062a\u0642\u0631\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0633\u0626\u0644\u0629 \u0644\u0644\u062a\u0641\u0643\u064a\u0631<\/h2>\r\n <div class=\"space-y-3\">\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/10\">\r\n <p class=\"text-l text-slate-300\">1. \u0644\u0645\u0627\u0630\u0627 \u064a\u0642\u0639 \u062e\u0637 \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0639\u0630\u0628\u0629 (F) \u0623\u0633\u0641\u0644 \u062e\u0637 \u0627\u0644\u0635\u064a\u0641 (S) \u0639\u0644\u0649 \u0647\u064a\u0643\u0644 \u0627\u0644\u0633\u0641\u064a\u0646\u0629\u061f<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/10\">\r\n <p class=\"text-l text-slate-300\">2. \u0643\u064a\u0641 \u064a\u0633\u0627\u0639\u062f \u0642\u064a\u0627\u0633 \u0627\u0644\u063a\u0627\u0637\u0633 \u0642\u0628\u0644 \u0648\u0628\u0639\u062f \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0641\u064a \u0645\u0646\u0639 \u0627\u0644\u062a\u0644\u0627\u0639\u0628 \u0628\u0623\u0648\u0632\u0627\u0646 \u0627\u0644\u0628\u0636\u0627\u0626\u0639\u061f<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/10\">\r\n <p class=\"text-l text-slate-300\">3. \u0645\u0627 \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0621 \u0648\u0645\u0633\u062a\u0648\u0649 \u0637\u0641\u0648 \u0627\u0644\u0633\u0641\u064a\u0646\u0629\u061f<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0625\u062b\u0631\u0627\u0626\u064a<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\">\u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u062a\u0637\u0628\u064a\u0642\u0627\u0646 \u0639\u0645\u0644\u064a\u0627\u0646 \u062d\u064a\u0648\u064a\u0627\u0646 \u0644\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633. \u0641\u0647\u0645\u0627 \u064a\u0636\u0645\u0646\u0627\u0646 \u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0645\u0644\u0627\u062d\u0629 \u0627\u0644\u0628\u062d\u0631\u064a\u0629 \u0639\u0628\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0642\u0635\u0648\u0649 \u0627\u0644\u0622\u0645\u0646\u0629 \u0644\u0644\u0633\u0641\u0646 \u0645\u0639 \u0645\u0631\u0627\u0639\u0627\u0629 \u0627\u062e\u062a\u0644\u0627\u0641 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u064a\u0627\u0647 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629. \u0641\u0647\u0645 \u0647\u0630\u0647 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u064a\u0633\u0627\u0639\u062f \u0641\u064a \u0645\u0646\u0639 \u0627\u0644\u0643\u0648\u0627\u0631\u062b \u0627\u0644\u0628\u062d\u0631\u064a\u0629 \u0627\u0644\u0646\u0627\u062a\u062c\u0629 \u0639\u0646 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 \u0627\u0644\u0632\u0627\u0626\u062f\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ============================================\r\n \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (Ship Load Simulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('ship-load-simulation');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u063a\u0627\u0637\u0633 \u0648\u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 (\u0628\u0644\u064a\u0645\u0633\u0648\u0644)<\/h3>\r\n <div class=\"flex flex-col md:flex-row justify-between items-center mb-6 gap-4\">\r\n <div class=\"flex gap-2\">\r\n <button id=\"water-salt\" class=\"px-4 py-2 rounded-lg text-l font-bold transition-all bg-blue-600 text-white\">\u0645\u064a\u0627\u0647 \u0645\u0627\u0644\u062d\u0629 (\u0627\u0644\u0628\u062d\u0631)<\/button>\r\n <button id=\"water-fresh\" class=\"px-4 py-2 rounded-lg text-l font-bold transition-all bg-slate-800 text-slate-400\">\u0645\u064a\u0627\u0647 \u0639\u0630\u0628\u0629 (\u0646\u0647\u0631)<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n <div class=\"lg:col-span-3 relative h-80 bg-gradient-to-b from-sky-400\/20 to-blue-900\/40 rounded-xl overflow-hidden border border-slate-800 flex items-end justify-center\">\r\n <div id=\"water-level\" class=\"absolute bottom-0 w-full bg-blue-500\/40 backdrop-blur-l z-10 transition-all duration-300\" style=\"height: 40%\">\r\n <div class=\"absolute top-0 w-full h-4 bg-white\/20 animate-pulse\"><\/div>\r\n <\/div>\r\n <div id=\"ship-container\" class=\"relative z-20 flex flex-col items-center\" style=\"transform: translateY(0px); transition: transform 0.3s ease-out\">\r\n <div class=\"w-64 h-40 bg-slate-800 rounded-b-[40px] border-x-4 border-b-4 border-slate-700 relative\">\r\n <div class=\"absolute -top-10 left-1\/2 -translate-x-1\/2 w-40 h-10 bg-slate-700 rounded-t-lg\">\r\n <div class=\"absolute top-2 left-4 w-8 h-4 bg-slate-600\"><\/div>\r\n <div class=\"absolute top-2 right-4 w-8 h-4 bg-slate-600\"><\/div>\r\n <\/div>\r\n <div class=\"absolute left-2 top-0 h-full flex flex-col justify-between py-2 text-[8px] font-mono text-amber-400\/60\">\r\n <span>10m \u2014<\/span><span>9m \u2014<\/span><span>8m \u2014<\/span><span>7m \u2014<\/span><span>6m \u2014<\/span><span>5m \u2014<\/span><span>4m \u2014<\/span><span>3m \u2014<\/span><span>2m \u2014<\/span><span>1m \u2014<\/span>\r\n <\/div>\r\n <div class=\"absolute right-0 top-1\/2 -translate-y-1\/2 flex items-center\">\r\n <div class=\"w-8 h-px bg-rose-500\"><\/div>\r\n <div class=\"w-4 h-4 border-2 border-rose-500 rounded-full flex items-center justify-center\">\r\n <div class=\"w-6 h-px bg-rose-500\"><\/div>\r\n <\/div>\r\n <span class=\"text-[8px] text-rose-400 mr-1 font-bold\">S<\/span>\r\n <\/div>\r\n <div id=\"cargo-container\" class=\"absolute inset-x-4 bottom-4 flex flex-wrap-reverse gap-1 justify-center\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute top-4 left-4 flex flex-col gap-2\">\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-blue-500\"><\/div><span id=\"water-density-label\" class=\"text-[10px] text-slate-300\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621: 1025 kg\/m\u00b3<\/span><\/div>\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-amber-600\"><\/div><span id=\"load-label\" class=\"text-[10px] text-slate-300\">\u0627\u0644\u062d\u0645\u0648\u0644\u0629: 5000 \u0637\u0646<\/span><\/div>\r\n <\/div>\r\n <div id=\"warning-overlay\" class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 z-50 bg-rose-600 text-white px-4 py-2 rounded-lg shadow-2xl flex items-center gap-2 hidden\">\r\n <span class=\"text-l font-bold\">\u062a\u062d\u0630\u064a\u0631: \u062a\u062c\u0627\u0648\u0632 \u062e\u0637 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0622\u0645\u0646!<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-white\/5\">\r\n <label class=\"text-l text-slate-400 block mb-2 flex justify-between\">\r\n <span>\u0648\u0632\u0646 \u0627\u0644\u062d\u0645\u0648\u0644\u0629 (\u0637\u0646)<\/span>\r\n <span id=\"load-value\" class=\"text-amber-400 font-bold\">5000 t<\/span>\r\n <\/label>\r\n <input id=\"load-slider\" type=\"range\" min=\"0\" max=\"10000\" step=\"500\" value=\"5000\" class=\"w-full accent-amber-500\">\r\n <\/div>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-xl border border-blue-500\/30\">\r\n <h4 class=\"text-blue-400 font-bold mb-2 text-l\">\u0645\u0644\u0627\u062d\u0638\u0629 \u0627\u0644\u0643\u062b\u0627\u0641\u0629:<\/h4>\r\n <p class=\"text-[10px] text-slate-300 leading-relaxed\">\u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u062a\u063a\u0648\u0635 \u0627\u0644\u0633\u0641\u064a\u0646\u0629 <strong class=\"text-white\">\u0623\u0643\u062b\u0631<\/strong> \u0641\u064a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0639\u0630\u0628\u0629 \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u0627\u0644\u0645\u0627\u0644\u062d\u0629 \u0644\u0646\u0641\u0633 \u0627\u0644\u0648\u0632\u0646\u060c \u0644\u0623\u0646 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0639\u0630\u0628 \u0623\u0642\u0644.<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-slate-800\/30 rounded-xl border border-white\/5\">\r\n <div class=\"flex items-center gap-2 mb-2\">\r\n <span class=\"text-l font-bold text-white\">\u0627\u0644\u063a\u0627\u0637\u0633 \u0627\u0644\u062d\u0627\u0644\u064a:<\/span>\r\n <\/div>\r\n <div id=\"draft-display\" class=\"text-lg font-bold text-center text-white\">13.01 <span class=\"text-l text-slate-500\">\u0645\u062a\u0631<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let load = 5000;\r\n let waterType = 'salt';\r\n const shipBaseMass = 5000;\r\n const areaFactor = 150;\r\n const saltDensity = 1025;\r\n const freshDensity = 1000;\r\n\r\n const saltBtn = document.getElementById('water-salt');\r\n const freshBtn = document.getElementById('water-fresh');\r\n const loadSlider = document.getElementById('load-slider');\r\n const loadValueSpan = document.getElementById('load-value');\r\n const loadLabelSpan = document.getElementById('load-label');\r\n const densityLabelSpan = document.getElementById('water-density-label');\r\n const draftDisplay = document.getElementById('draft-display');\r\n const warningOverlay = document.getElementById('warning-overlay');\r\n const waterLevelDiv = document.getElementById('water-level');\r\n const shipContainer = document.getElementById('ship-container');\r\n const cargoContainer = document.getElementById('cargo-container');\r\n\r\n function calculateDraft() {\r\n const totalMassKg = (shipBaseMass + load) * 1000;\r\n const density = waterType === 'salt' ? saltDensity : freshDensity;\r\n const volumeSubmerged = totalMassKg \/ density;\r\n return volumeSubmerged \/ areaFactor;\r\n }\r\n\r\n function updateSimulation() {\r\n const draft = calculateDraft();\r\n const density = waterType === 'salt' ? saltDensity : freshDensity;\r\n const totalMass = shipBaseMass + load;\r\n\r\n loadValueSpan.innerText = load + ' t';\r\n loadLabelSpan.innerText = `\u0627\u0644\u062d\u0645\u0648\u0644\u0629: ${load} \u0637\u0646`;\r\n densityLabelSpan.innerText = `\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0621: ${density} kg\/m\u00b3`;\r\n draftDisplay.innerHTML = draft.toFixed(2) + ' <span class=\"text-l text-slate-500\">\u0645\u062a\u0631<\/span>';\r\n\r\n const summerDraft = (10000 * 1000) \/ (saltDensity * areaFactor);\r\n if (draft > summerDraft * 1.05) {\r\n warningOverlay.classList.remove('hidden');\r\n } else {\r\n warningOverlay.classList.add('hidden');\r\n }\r\n\r\n const maxDraftForDisplay = 20;\r\n const waterHeightPercent = Math.min(100, (draft \/ maxDraftForDisplay) * 100);\r\n waterLevelDiv.style.height = `${waterHeightPercent}%`;\r\n\r\n const maxOffset = 60;\r\n const yOffset = Math.min(maxOffset, (draft \/ maxDraftForDisplay) * maxOffset);\r\n shipContainer.style.transform = `translateY(${yOffset}px)`;\r\n\r\n const numBoxes = Math.floor(load \/ 500);\r\n cargoContainer.innerHTML = '';\r\n for (let i = 0; i < numBoxes; i++) {\r\n const box = document.createElement('div');\r\n box.className = 'w-6 h-6 bg-amber-600 rounded-l border border-amber-800';\r\n cargoContainer.appendChild(box);\r\n }\r\n }\r\n\r\n saltBtn.addEventListener('click', () => {\r\n waterType = 'salt';\r\n saltBtn.classList.add('bg-blue-600', 'text-white');\r\n saltBtn.classList.remove('bg-slate-800', 'text-slate-400');\r\n freshBtn.classList.remove('bg-sky-600', 'text-white');\r\n freshBtn.classList.add('bg-slate-800', 'text-slate-400');\r\n updateSimulation();\r\n });\r\n\r\n freshBtn.addEventListener('click', () => {\r\n waterType = 'fresh';\r\n freshBtn.classList.add('bg-sky-600', 'text-white');\r\n freshBtn.classList.remove('bg-slate-800', 'text-slate-400');\r\n saltBtn.classList.remove('bg-blue-600', 'text-white');\r\n saltBtn.classList.add('bg-slate-800', 'text-slate-400');\r\n updateSimulation();\r\n });\r\n\r\n loadSlider.addEventListener('input', (e) => {\r\n load = parseInt(e.target.value);\r\n updateSimulation();\r\n });\r\n\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-18514","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18514","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=18514"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18514\/revisions"}],"predecessor-version":[{"id":18515,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18514\/revisions\/18515"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}