{"id":18496,"date":"2026-06-21T17:19:55","date_gmt":"2026-06-21T17:19:55","guid":{"rendered":"https:\/\/tendify.net\/?p=18496"},"modified":"2026-07-15T05:26:00","modified_gmt":"2026-07-15T05:26:00","slug":"2d-pallet-loading-estimator","status":"publish","type":"post","link":"https:\/\/tendify.net\/ar\/2d-pallet-loading-estimator\/","title":{"rendered":"Free 2D Pallet Loading Estimator"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n 2D Pallet Loading Estimator<\/title>\r\n <!-- \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc Tailwind CSS \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n tendify: {\r\n dark: '#0B0F19',\r\n card: '#161F30',\r\n accent: '#3B82F6',\r\n accentHover: '#2563EB',\r\n success: '#10B981',\r\n warning: '#F59E0B',\r\n textMuted: '#9CA3AF'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <!-- \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc (Internal CSS) \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc Tailwind -->\r\n <style>\r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0627 \u062a\u0645 \u062a\u06cc\u0631\u0647 \u0633\u0627\u06cc\u062a Tendify *\/\r\n .tendify-container {\r\n background-color: #0B0F19 !important;\r\n color: #F3F4F6 !important;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n border-radius: 12px;\r\n padding: 24px;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\r\n border: 1px solid #1E293B;\r\n }\r\n .tendify-input-group {\r\n margin-bottom: 16px;\r\n }\r\n .tendify-label {\r\n display: block;\r\n font-size: 14px;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n color: #9CA3AF;\r\n }\r\n .tendify-input {\r\n width: 100%;\r\n background-color: #161F30 !important;\r\n border: 1px solid #374151 !important;\r\n color: #FFFFFF !important;\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n font-size: 15px;\r\n transition: all 0.2s;\r\n }\r\n .tendify-input:focus {\r\n outline: none;\r\n border-color: #3B82F6 !important;\r\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);\r\n }\r\n .tendify-btn {\r\n background-color: #3B82F6 !important;\r\n color: #FFFFFF !important;\r\n font-weight: 600;\r\n padding: 12px 20px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n .tendify-btn:hover {\r\n background-color: #2563EB !important;\r\n }\r\n .tendify-card {\r\n background-color: #161F30;\r\n border: 1px solid #1E293B;\r\n border-radius: 10px;\r\n padding: 16px;\r\n }\r\n .canvas-container {\r\n position: relative;\r\n width: 100%;\r\n background-color: #111827;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px dashed #4B5563;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#030712] py-8 px-4\">\r\n\r\n <!-- \u0645\u062d\u0641\u0638\u0647 \u0627\u0635\u0644\u06cc \u0627\u0628\u0632\u0627\u0631 \u062a\u062e\u0645\u06cc\u0646\u200c\u06af\u0631 \u0686\u06cc\u062f\u0645\u0627\u0646 \u067e\u0627\u0644\u062a -->\r\n <div class=\"tendify-container max-w-5xl mx-auto shadow-2xl\">\r\n \r\n <!-- \u0647\u062f\u0631 \u0627\u0628\u0632\u0627\u0631 -->\r\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-800 pb-5 mb-6\">\r\n <div>\r\n <h1 class=\"text-2xl md:text-3xl font-extrabold text-white tracking-tight flex items-center gap-2\">\r\n <span class=\"text-blue-500\">\u25a0<\/span> 2D Pallet Loading Estimator\r\n <\/h1>\r\n <p class=\"text-sm text-gray-400 mt-1\">Optimize your cargo layout. Calculate maximum carton capacity per layer.<\/p>\r\n <\/div>\r\n <div class=\"mt-3 md:mt-0 px-3 py-1 bg-blue-900\/40 border border-blue-500\/30 rounded-full text-xs text-blue-400 font-medium\">\r\n Tendify Optimization Tools\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\r\n \r\n <!-- \u0633\u062a\u0648\u0646 \u0633\u0645\u062a \u0686\u067e: \u0641\u0631\u0645 \u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a (\u0639\u0631\u0636 5 \u062f\u0631 \u062f\u0633\u06a9\u062a\u0627\u067e) -->\r\n <div class=\"lg:col-span-5 space-y-6\">\r\n \r\n <!-- \u0628\u062e\u0634 \u0627\u0648\u0644: \u0627\u0628\u0639\u0627\u062f \u067e\u0627\u0644\u062a -->\r\n <div class=\"tendify-card\">\r\n <h2 class=\"text-lg font-bold text-white mb-4 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5 text-blue-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"><\/path><\/svg>\r\n 1. Pallet Dimensions\r\n <\/h2>\r\n \r\n <!-- \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 -->\r\n <div class=\"tendify-input-group mb-4\">\r\n <label class=\"tendify-label\">Preset Standard Pallets<\/label>\r\n <select id=\"presetPallet\" class=\"tendify-input text-gray-300\" onchange=\"applyPresetPallet()\">\r\n <option value=\"euro\">EUR 1: Euro Pallet (1200 x 800 mm)<\/option>\r\n <option value=\"industrial\">EUR 2: Industrial Pallet (1200 x 1000 mm)<\/option>\r\n <option value=\"us\">Standard US Pallet (1219 x 1016 mm)<\/option>\r\n <option value=\"custom\">Custom Dimensions...<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div class=\"tendify-input-group\">\r\n <label class=\"tendify-label\">Length (mm)<\/label>\r\n <input type=\"number\" id=\"palletLength\" class=\"tendify-input\" value=\"1200\" min=\"100\" max=\"5000\" oninput=\"onCustomPalletChange()\">\r\n <\/div>\r\n <div class=\"tendify-input-group\">\r\n <label class=\"tendify-label\">Width (mm)<\/label>\r\n <input type=\"number\" id=\"palletWidth\" class=\"tendify-input\" value=\"800\" min=\"100\" max=\"5000\" oninput=\"onCustomPalletChange()\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0628\u062e\u0634 \u062f\u0648\u0645: \u0627\u0628\u0639\u0627\u062f \u06a9\u0627\u0631\u062a\u0646 \/ \u062c\u0639\u0628\u0647 -->\r\n <div class=\"tendify-card\">\r\n <h2 class=\"text-lg font-bold text-white mb-4 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5 text-blue-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"><\/path><\/svg>\r\n 2. Carton \/ Box Dimensions\r\n <\/h2>\r\n \r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div class=\"tendify-input-group\">\r\n <label class=\"tendify-label\">Length (mm)<\/label>\r\n <input type=\"number\" id=\"cartonLength\" class=\"tendify-input\" value=\"400\" min=\"10\" max=\"3000\">\r\n <\/div>\r\n <div class=\"tendify-input-group\">\r\n <label class=\"tendify-label\">Width (mm)<\/label>\r\n <input type=\"number\" id=\"cartonWidth\" class=\"tendify-input\" value=\"300\" min=\"10\" max=\"3000\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0641\u0627\u0635\u0644\u0647 \u0627\u06cc\u0645\u0646\u06cc (\u062a\u0644\u0648\u0631\u0627\u0646\u0633 \u0644\u0628\u0647\u200c\u0647\u0627) -->\r\n <div class=\"tendify-input-group mt-2\">\r\n <label class=\"tendify-label flex justify-between\">\r\n <span>Safety Margin (mm)<\/span>\r\n <span class=\"text-xs text-gray-500\">Free space around edges<\/span>\r\n <\/label>\r\n <input type=\"number\" id=\"margin\" class=\"tendify-input\" value=\"0\" min=\"0\" max=\"100\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062f\u06a9\u0645\u0647 \u0645\u062d\u0627\u0633\u0628\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 -->\r\n <button onclick=\"calculateLayout()\" class=\"tendify-btn text-lg py-3 flex items-center justify-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"><\/path><\/svg>\r\n Calculate Optimal Layout\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <!-- \u0633\u062a\u0648\u0646 \u0633\u0645\u062a \u0631\u0627\u0633\u062a: \u0646\u0645\u0627\u06cc\u0634 \u062e\u0631\u0648\u062c\u06cc \u0628\u0648\u0645 \u0648 \u0622\u0645\u0627\u0631 (\u0639\u0631\u0636 7 \u062f\u0631 \u062f\u0633\u06a9\u062a\u0627\u067e) -->\r\n <div class=\"lg:col-span-7 flex flex-col space-y-6\">\r\n \r\n <!-- \u06a9\u0627\u0631\u062a \u0646\u062a\u0627\u06cc\u062c \u0639\u062f\u062f\u06cc \u0633\u0631\u06cc\u0639 -->\r\n <div class=\"grid grid-cols-3 gap-3\">\r\n <div class=\"tendify-card text-center flex flex-col justify-center py-4\">\r\n <span class=\"text-xs text-gray-400 uppercase tracking-wider font-semibold\">Max Quantity<\/span>\r\n <span id=\"resQty\" class=\"text-3xl font-black text-blue-500 mt-1\">-<\/span>\r\n <span class=\"text-[10px] text-gray-500 mt-1\">boxes \/ layer<\/span>\r\n <\/div>\r\n <div class=\"tendify-card text-center flex flex-col justify-center py-4\">\r\n <span class=\"text-xs text-gray-400 uppercase tracking-wider font-semibold\">Space Efficiency<\/span>\r\n <span id=\"resEfficiency\" class=\"text-3xl font-black text-green-500 mt-1\">-<\/span>\r\n <span class=\"text-[10px] text-gray-500 mt-1\">utilized area<\/span>\r\n <\/div>\r\n <div class=\"tendify-card text-center flex flex-col justify-center py-4\">\r\n <span class=\"text-xs text-gray-400 uppercase tracking-wider font-semibold\">Wasted Space<\/span>\r\n <span id=\"resWasted\" class=\"text-3xl font-black text-red-400 mt-1\">-<\/span>\r\n <span class=\"text-[10px] text-gray-500 mt-1\">empty space<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0628\u0648\u0645 \u0646\u0645\u0627\u06cc\u0634 \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 (\u0628\u062e\u0634 \u0628\u0633\u06cc\u0627\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u0632\u06cc\u0628\u0627) -->\r\n <div class=\"tendify-card flex-1 flex flex-col\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-md font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-green-500 animate-pulse\"><\/span>\r\n Live 2D Cargo Map\r\n <\/h3>\r\n <!-- \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0631\u0646\u06af \u0686\u06cc\u062f\u0645\u0627\u0646 -->\r\n <div class=\"flex gap-4 text-xs\">\r\n <span class=\"flex items-center gap-1.5 text-gray-400\">\r\n <span class=\"w-3 h-3 bg-blue-500\/20 border border-blue-500 rounded\"><\/span> Carton\r\n <\/span>\r\n <span class=\"flex items-center gap-1.5 text-gray-400\">\r\n <span class=\"w-3 h-3 bg-amber-600\/30 border border-amber-600\/80 rounded\"><\/span> Rotated\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0628\u062e\u0634 \u0628\u0648\u0645 \u0631\u0633\u0645 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u06a9\u0627\u0645\u0644\u0627\u064b \u0631\u0648\u0627\u0646 -->\r\n <div class=\"canvas-container flex-1 flex items-center justify-center p-4 min-h-[350px]\">\r\n <canvas id=\"layoutCanvas\" class=\"max-w-full max-h-full block rounded shadow-lg transition-transform duration-300\"><\/canvas>\r\n \r\n <!-- \u067e\u06cc\u0627\u0645 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 -->\r\n <div id=\"startPlaceholder\" class=\"absolute inset-0 flex flex-col items-center justify-center bg-gray-950\/90 text-center p-6\">\r\n <svg class=\"w-16 h-16 text-gray-600 mb-4 animate-bounce\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path><\/svg>\r\n <h4 class=\"text-white font-bold text-lg\">Awaiting Calculations<\/h4>\r\n <p class=\"text-sm text-gray-400 max-w-sm mt-1\">Adjust dimensions on the left panel and click \"Calculate Optimal Layout\" to visualize the results.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0628\u062e\u0634 \u062c\u0632\u0626\u06cc\u0627\u062a \u0686\u06cc\u062f\u0645\u0627\u0646 \u067e\u0633 \u0627\u0632 \u0645\u062d\u0627\u0633\u0628\u0647 -->\r\n <div id=\"layoutDetails\" class=\"hidden mt-4 pt-4 border-t border-gray-800 text-sm grid grid-cols-2 gap-4 text-gray-300\">\r\n <div>\r\n <span class=\"text-gray-500 block\">Optimal Pattern Strategy:<\/span>\r\n <strong id=\"patternStrategy\" class=\"text-white\">-<\/strong>\r\n <\/div>\r\n <div>\r\n <span class=\"text-gray-500 block\">Total Calculated Area:<\/span>\r\n <span class=\"text-white font-semibold\"><span id=\"palletTotalArea\">-<\/span> m\u00b2<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- \u0641\u0648\u062a\u0631 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0633\u0627\u06cc\u062a Tendify -->\r\n <div class=\"mt-8 pt-4 border-t border-gray-800 text-xs text-center text-gray-500\">\r\n \u00a9 2026 Tendify.Net cargo optimization service. This 2D Pallet Calculator helps logistics planning for container filling efficiency.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0628\u0632\u0627\u0631 \u0628\u0647 \u0632\u0628\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0648 \u0628\u0627 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u062f\u0648\u0628\u0639\u062f\u06cc -->\r\n <script>\r\n \/\/ \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u06af\u0644\u0648\u0628\u0627\u0644 \u0628\u0631\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u062a\u0631\u0633\u06cc\u0645\r\n let currentLayoutData = null;\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u0639\u0645\u0627\u0644 \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\r\n function applyPresetPallet() {\r\n const preset = document.getElementById('presetPallet').value;\r\n const lengthInput = document.getElementById('palletLength');\r\n const widthInput = document.getElementById('palletWidth');\r\n\r\n if (preset === 'euro') {\r\n lengthInput.value = 1200;\r\n widthInput.value = 800;\r\n } else if (preset === 'industrial') {\r\n lengthInput.value = 1200;\r\n widthInput.value = 1000;\r\n } else if (preset === 'us') {\r\n lengthInput.value = 1219;\r\n widthInput.value = 1016;\r\n }\r\n \r\n \/\/ \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0627\u0644\u062a \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u062f\u0648\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u0627\u0642\u06cc \u0645\u06cc\u200c\u0645\u0627\u0646\u0646\u062f\r\n calculateLayout();\r\n }\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0633\u062a\u06cc \u0641\u06cc\u0644\u062f\u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f\u060c \u062d\u0627\u0644\u062a \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0628\u0647 \"\u0633\u0641\u0627\u0631\u0634\u06cc\" \u062a\u0628\u062f\u06cc\u0644 \u0634\u0648\u062f\r\n function onCustomPalletChange() {\r\n document.getElementById('presetPallet').value = 'custom';\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u0635\u0644\u06cc \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u062f\u0648\u0628\u0639\u062f\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u067e\u0627\u0644\u062a\r\n function calculateLayout() {\r\n \/\/ \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\r\n const PL = parseFloat(document.getElementById('palletLength').value);\r\n const PW = parseFloat(document.getElementById('palletWidth').value);\r\n const CL = parseFloat(document.getElementById('cartonLength').value);\r\n const CW = parseFloat(document.getElementById('cartonWidth').value);\r\n const margin = parseFloat(document.getElementById('margin').value) || 0;\r\n\r\n \/\/ \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631\r\n if (isNaN(PL) || isNaN(PW) || isNaN(CL) || isNaN(CW) || PL <= 0 || PW <= 0 || CL <= 0 || CW <= 0) {\r\n alertUser(\"Please enter valid positive numbers for dimensions.\");\r\n return;\r\n }\r\n\r\n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0644\u0627\u06cc\u0647 \u0645\u062d\u0627\u0641\u0638 \u0627\u06cc\u0645\u0646\u06cc (\u06a9\u0645 \u06a9\u0631\u062f\u0646 \u0627\u0632 \u0627\u0628\u0639\u0627\u062f \u067e\u0627\u0644\u062a \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647)\r\n const usableL = PL - (margin * 2);\r\n const usableW = PW - (margin * 2);\r\n\r\n if (usableL <= 0 || usableW <= 0) {\r\n alertUser(\"The margin is too large for the current pallet dimensions!\");\r\n return;\r\n }\r\n\r\n if (CL > usableL && CW > usableL && CL > usableW && CW > usableW) {\r\n alertUser(\"Your carton size is larger than the usable pallet size.\");\r\n return;\r\n }\r\n\r\n \/\/ \u0645\u062e\u0641\u06cc \u06a9\u0631\u062f\u0646 \u067e\u0644\u06cc\u0633\u200c\u0647\u0648\u0644\u062f\u0631 \u0634\u0631\u0648\u0639 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062c\u0632\u0626\u06cc\u0627\u062a \u062e\u0631\u0648\u062c\u06cc\r\n document.getElementById('startPlaceholder').style.display = 'none';\r\n document.getElementById('layoutDetails').classList.remove('hidden');\r\n\r\n \/\/ \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646: \u0645\u0627 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\r\n const layoutOptions = [];\r\n\r\n \/\/ \u062d\u0627\u0644\u062a \u06f1: \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0644\u0648\u06a9\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 (\u0628\u062f\u0648\u0646 \u0686\u0631\u062e\u0634 - \u0647\u0645\u06af\u06cc \u0645\u0648\u0627\u0632\u06cc \u0628\u0627 \u0637\u0648\u0644 \u067e\u0627\u0644\u062a)\r\n \/\/ \u06a9\u0627\u0631\u062a\u0646\u200c\u0647\u0627 \u062f\u0631 \u0627\u0645\u062a\u062f\u0627\u062f \u0637\u0648\u0644 \u067e\u0627\u0644\u062a \u0686\u06cc\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\r\n const count1_L = Math.floor(usableL \/ CL);\r\n const count1_W = Math.floor(usableW \/ CW);\r\n const total1 = count1_L * count1_W;\r\n \r\n const boxes1 = [];\r\n if (total1 > 0) {\r\n for (let i = 0; i < count1_L; i++) {\r\n for (let j = 0; j < count1_W; j++) {\r\n boxes1.push({\r\n x: margin + (i * CL),\r\n y: margin + (j * CW),\r\n w: CL,\r\n h: CW,\r\n rotated: false\r\n });\r\n }\r\n }\r\n }\r\n layoutOptions.push({ total: total1, boxes: boxes1, type: \"Standard Row (Longitudinal)\" });\r\n\r\n \/\/ \u062d\u0627\u0644\u062a \u06f2: \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0644\u0648\u06a9\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 (\u06f9\u06f0 \u062f\u0631\u062c\u0647 \u0686\u0631\u062e\u06cc\u062f\u0647 - \u0647\u0645\u06af\u06cc \u0639\u0645\u0648\u062f\u06cc \u0628\u0631 \u0637\u0648\u0644 \u067e\u0627\u0644\u062a)\r\n const count2_L = Math.floor(usableL \/ CW);\r\n const count2_W = Math.floor(usableW \/ CL);\r\n const total2 = count2_L * count2_W;\r\n \r\n const boxes2 = [];\r\n if (total2 > 0) {\r\n for (let i = 0; i < count2_L; i++) {\r\n for (let j = 0; j < count2_W; j++) {\r\n boxes2.push({\r\n x: margin + (i * CW),\r\n y: margin + (j * CL),\r\n w: CW,\r\n h: CL,\r\n rotated: true\r\n });\r\n }\r\n }\r\n }\r\n layoutOptions.push({ total: total2, boxes: boxes2, type: \"Standard Row (Transverse)\" });\r\n\r\n \/\/ \u062d\u0627\u0644\u062a \u06f3: \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628\u06cc (\u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0644\u0648\u06a9\u06cc \u062f\u0631 \u06cc\u06a9 \u0628\u062e\u0634 \u0648 \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u0627 \u06a9\u0627\u0631\u062a\u0646\u200c\u0647\u0627\u06cc \u0686\u0631\u062e\u06cc\u062f\u0647)\r\n \/\/ \u062d\u0627\u0644\u062a \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0622: \u0628\u0644\u0648\u06a9 \u0637\u0648\u0644\u06cc \u062f\u0631 \u0628\u0627\u0644\u0627\/\u0686\u067e \u0648 \u06a9\u0627\u0631\u062a\u0646\u200c\u0647\u0627\u06cc \u0686\u0631\u062e\u06cc\u062f\u0647 \u062f\u0631 \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u0637\u0648\u0644\r\n const comboA_boxes = [];\r\n const blockA_cols = Math.floor(usableL \/ CL);\r\n const blockA_rows = Math.floor(usableW \/ CW);\r\n \r\n \/\/ \u0631\u0633\u0645 \u0628\u0644\u0648\u06a9 \u0627\u0635\u0644\u06cc\r\n for (let i = 0; i < blockA_cols; i++) {\r\n for (let j = 0; j < blockA_rows; j++) {\r\n comboA_boxes.push({ x: margin + (i * CL), y: margin + (j * CW), w: CL, h: CW, rotated: false });\r\n }\r\n }\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0641\u0636\u0627\u06cc \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u062f\u0631 \u0637\u0648\u0644 \u067e\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0686\u0631\u062e\u06cc\u062f\u0647\r\n const remA_L = usableL - (blockA_cols * CL);\r\n if (remA_L >= CW) {\r\n const extra_cols = Math.floor(remA_L \/ CW);\r\n const extra_rows = Math.floor(usableW \/ CL);\r\n for (let i = 0; i < extra_cols; i++) {\r\n for (let j = 0; j < extra_rows; j++) {\r\n comboA_boxes.push({\r\n x: margin + (blockA_cols * CL) + (i * CW),\r\n y: margin + (j * CL),\r\n w: CW,\r\n h: CL,\r\n rotated: true\r\n });\r\n }\r\n }\r\n }\r\n layoutOptions.push({ total: comboA_boxes.length, boxes: comboA_boxes, type: \"Hybrid Block (Side Fill)\" });\r\n\r\n \/\/ \u062d\u0627\u0644\u062a \u06f4: \u062d\u0627\u0644\u062a \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0628: \u0628\u0644\u0648\u06a9 \u0637\u0648\u0644\u06cc \u0648 \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u0627 \u06a9\u0627\u0631\u062a\u0646\u200c\u0647\u0627\u06cc \u0686\u0631\u062e\u06cc\u062f\u0647 \u062f\u0631 \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u0639\u0631\u0636\r\n const comboB_boxes = [];\r\n const blockB_cols = Math.floor(usableL \/ CL);\r\n const blockB_rows = Math.floor(usableW \/ CW);\r\n \r\n for (let i = 0; i < blockB_cols; i++) {\r\n for (let j = 0; j < blockB_rows; j++) {\r\n comboB_boxes.push({ x: margin + (i * CL), y: margin + (j * CW), w: CL, h: CW, rotated: false });\r\n }\r\n }\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0641\u0636\u0627\u06cc \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u062f\u0631 \u0639\u0631\u0636 \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646\r\n const remB_W = usableW - (blockB_rows * CW);\r\n if (remB_W >= CL) {\r\n const extra_cols = Math.floor(usableL \/ CW);\r\n const extra_rows = Math.floor(remB_W \/ CL);\r\n for (let i = 0; i < extra_cols; i++) {\r\n for (let j = 0; j < extra_rows; j++) {\r\n comboB_boxes.push({\r\n x: margin + (i * CW),\r\n y: margin + (blockB_rows * CW) + (j * CL),\r\n w: CW,\r\n h: CL,\r\n rotated: true\r\n });\r\n }\r\n }\r\n }\r\n layoutOptions.push({ total: comboB_boxes.length, boxes: comboB_boxes, type: \"Hybrid Block (Bottom Fill)\" });\r\n\r\n \/\/ \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0637\u0631\u062d \u0628\u0627 \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u062a\u0646 \u0686\u06cc\u062f\u0647 \u0634\u062f\u0647\r\n layoutOptions.sort((a, b) => b.total - a.total);\r\n const bestLayout = layoutOptions[0];\r\n\r\n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0622\u0645\u0627\u0631\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a\r\n const palletArea = PL * PW; \/\/ \u0645\u0633\u0627\u062d\u062a \u06a9\u0644 \u067e\u0627\u0644\u062a\r\n const cartonArea = CL * CW; \/\/ \u0645\u0633\u0627\u062d\u062a \u06cc\u06a9 \u06a9\u0627\u0631\u062a\u0646\r\n const totalUsedArea = bestLayout.total * cartonArea;\r\n const efficiency = (totalUsedArea \/ palletArea) * 100;\r\n const wasted = 100 - efficiency;\r\n\r\n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u067e\u0646\u0644 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0628\u0632\u0627\u0631\r\n document.getElementById('resQty').innerText = bestLayout.total;\r\n document.getElementById('resEfficiency').innerText = efficiency.toFixed(1) + \"%\";\r\n document.getElementById('resWasted').innerText = wasted.toFixed(1) + \"%\";\r\n document.getElementById('patternStrategy').innerText = bestLayout.type;\r\n document.getElementById('palletTotalArea').innerText = (palletArea \/ 1000000).toFixed(2);\r\n\r\n \/\/ \u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u0631\u0633\u0645 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u067e\u0627\u0644\u062a \u0631\u0648\u06cc \u0628\u0648\u0645\r\n currentLayoutData = {\r\n palletL: PL,\r\n palletW: PW,\r\n boxes: bestLayout.boxes,\r\n margin: margin\r\n };\r\n\r\n drawPallet();\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u062a\u0631\u0633\u06cc\u0645 \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u06f2\u0628\u0639\u062f\u06cc \u0631\u0648\u06cc Canvas\r\n function drawPallet() {\r\n if (!currentLayoutData) return;\r\n\r\n const canvas = document.getElementById('layoutCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const container = canvas.parentElement;\r\n\r\n \/\/ \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648 \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u06a9\u0631\u062f\u0646 \u0627\u0628\u0639\u0627\u062f \u0628\u0648\u0645 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u062d\u0641\u0638\u0647 \u0622\u0646\r\n const containerWidth = container.clientWidth - 32; \/\/ \u06a9\u0633\u0631 \u0641\u0627\u0635\u0644\u0647 \u062f\u0627\u062e\u0644\u06cc \u067e\u062f\u06cc\u0646\u06af\r\n const containerHeight = 350; \/\/ \u0627\u0631\u062a\u0641\u0627\u0639 \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u062f\u0633\u06a9\u062a\u0627\u067e \u0648 \u0645\u0648\u0628\u0627\u06cc\u0644\r\n\r\n \/\/ \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0646\u0633\u0628\u062a \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u067e\u0627\u0644\u062a\r\n const scaleX = containerWidth \/ currentLayoutData.palletL;\r\n const scaleY = containerHeight \/ currentLayoutData.palletW;\r\n const scale = Math.min(scaleX, scaleY) * 0.9; \/\/ \u0627\u0639\u0645\u0627\u0644 \u062d\u0627\u0634\u06cc\u0647 \u0627\u0645\u0646 \u06f1\u06f0 \u062f\u0631\u0635\u062f\u06cc \u062f\u0631 \u0631\u0633\u0645\r\n\r\n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0627\u0628\u0639\u0627\u062f \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0628\u0648\u0645 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0642\u06cc\u0627\u0633 \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647\r\n canvas.width = currentLayoutData.palletL * scale;\r\n canvas.height = currentLayoutData.palletW * scale;\r\n\r\n \/\/ \u06f1. \u0631\u0633\u0645 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0628\u0648\u0645 (\u067e\u0627\u0644\u062a)\r\n ctx.fillStyle = \"#1F2937\"; \/\/ \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0686\u0648\u0628\u06cc\/\u062a\u06cc\u0631\u0647 \u067e\u0627\u0644\u062a\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ \u0645\u0631\u0632 \u067e\u0627\u0644\u062a \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0628\u0627 \u062a\u0645 Tendify\r\n ctx.strokeStyle = \"#3B82F6\";\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ \u0631\u0633\u0645 \u0646\u0648\u0627\u0631\u0647\u0627\u06cc \u0686\u0648\u0628\u06cc \u0641\u0631\u0636\u06cc \u067e\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u0647 \u0628\u0635\u0631\u06cc \u0632\u06cc\u0628\u0627\u062a\u0631\r\n ctx.fillStyle = \"rgba(255, 255, 255, 0.03)\";\r\n const plankWidth = canvas.width \/ 5;\r\n for (let i = 0; i < 5; i += 2) {\r\n ctx.fillRect(i * plankWidth, 0, plankWidth, canvas.height);\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u062d\u0627\u0634\u06cc\u0647 \u0627\u0645\u0646\u06cc\u062a\u06cc \u0644\u0628\u0647\u200c\u0647\u0627\u06cc \u067e\u0627\u0644\u062a (\u0627\u06af\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a)\r\n if (currentLayoutData.margin > 0) {\r\n ctx.strokeStyle = \"rgba(239, 68, 68, 0.4)\";\r\n ctx.lineWidth = 1.5;\r\n ctx.setLineDash([5, 5]);\r\n ctx.strokeRect(\r\n currentLayoutData.margin * scale, \r\n currentLayoutData.margin * scale, \r\n (currentLayoutData.palletL - currentLayoutData.margin * 2) * scale, \r\n (currentLayoutData.palletW - currentLayoutData.margin * 2) * scale\r\n );\r\n ctx.setLineDash([]); \/\/ \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u062d\u0627\u0644\u062a \u062e\u0637\u200c\u0686\u06cc\u0646\r\n }\r\n\r\n \/\/ \u06f2. \u0631\u0633\u0645 \u062a\u06a9\u200c\u062a\u06a9 \u062c\u0639\u0628\u0647\u200c\u0647\u0627\/\u06a9\u0627\u0631\u062a\u0646\u200c\u0647\u0627\u06cc \u0686\u06cc\u062f\u0647 \u0634\u062f\u0647\r\n currentLayoutData.boxes.forEach((box, index) => {\r\n const bx = box.x * scale;\r\n const by = box.y * scale;\r\n const bw = box.w * scale;\r\n const bh = box.h * scale;\r\n\r\n \/\/ \u062a\u0645\u200c\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0686\u0631\u062e\u0634 \u06a9\u0627\u0631\u062a\u0646 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0632\u06cc\u0628\u0627\u062a\u0631 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\r\n if (box.rotated) {\r\n ctx.fillStyle = \"rgba(245, 158, 11, 0.15)\"; \/\/ \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0631\u062a\u0646 \u0686\u0631\u062e\u06cc\u062f\u0647 (\u0646\u0627\u0631\u0646\u062c\u06cc \u0645\u0644\u0627\u06cc\u0645)\r\n ctx.strokeStyle = \"rgba(245, 158, 11, 0.8)\"; \/\/ \u0644\u0628\u0647 \u06a9\u0627\u0631\u062a\u0646 \u0686\u0631\u062e\u06cc\u062f\u0647\r\n } else {\r\n ctx.fillStyle = \"rgba(59, 130, 246, 0.12)\"; \/\/ \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0631\u062a\u0646 \u0645\u0639\u0645\u0648\u0644\u06cc (\u0622\u0628\u06cc \u0645\u0644\u0627\u06cc\u0645)\r\n ctx.strokeStyle = \"rgba(59, 130, 246, 0.8)\"; \/\/ \u0644\u0628\u0647 \u06a9\u0627\u0631\u062a\u0646 \u0645\u0639\u0645\u0648\u0644\u06cc\r\n }\r\n\r\n ctx.lineWidth = 2;\r\n ctx.fillRect(bx, by, bw, bh);\r\n ctx.strokeRect(bx, by, bw, bh);\r\n\r\n \/\/ \u0631\u0633\u0645 \u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0631\u062a\u0646\u200c\u0647\u0627 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0647\u0631 \u06a9\u0627\u0631\u062a\u0646\r\n ctx.fillStyle = \"#E5E7EB\";\r\n ctx.font = `bold ${Math.max(10, Math.min(14, scale * 40))}px system-ui`;\r\n ctx.textAlign = \"center\";\r\n ctx.textBaseline = \"middle\";\r\n ctx.fillText(index + 1, bx + (bw \/ 2), by + (bh \/ 2));\r\n });\r\n }\r\n\r\n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0634\u062f\u0627\u0631 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u062f\u0647\u0627\u06cc \u0646\u0627\u0645\u0646\u0627\u0633\u0628 \u062f\u0631 iframe\r\n function alertUser(message) {\r\n const errorModal = document.createElement('div');\r\n errorModal.className = \"fixed inset-0 bg-black\/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-fade-in\";\r\n errorModal.innerHTML = `\r\n <div class=\"bg-[#161F30] border border-red-500\/30 rounded-xl p-6 max-w-md w-full shadow-2xl text-center\">\r\n <div class=\"w-12 h-12 bg-red-500\/10 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">Calculation Error<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6\">${message}<\/p>\r\n <button id=\"closeAlertBtn\" class=\"bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-lg w-full transition-colors\">\r\n Got it\r\n <\/button>\r\n <\/div>\r\n `;\r\n document.body.appendChild(errorModal);\r\n \r\n \/\/ \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0633\u062a\u0646 \u0645\u062f\u0627\u0644 \u0647\u0634\u062f\u0627\u0631\r\n document.getElementById('closeAlertBtn').onclick = function() {\r\n errorModal.remove();\r\n }\r\n }\r\n\r\n \/\/ \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062c\u0647\u062a \u062d\u0641\u0638 \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0628\u0648\u062f\u0646 \u0628\u0648\u0645 \u0631\u0633\u0645\r\n window.addEventListener('resize', drawPallet);\r\n\r\n \/\/ \u0627\u062c\u0631\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0627\u0648\u0644\u06cc\u0647 \u067e\u0633 \u0627\u0632 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0627\u0645\u0644 \u0635\u0641\u062d\u0647\r\n window.onload = function() {\r\n calculateLayout();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-5a3104f e-flex e-con-boxed e-con e-parent\" data-id=\"5a3104f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5677cc elementor-widget elementor-widget-spacer\" data-id=\"d5677cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-74c1cac e-flex e-con-boxed e-con e-parent\" data-id=\"74c1cac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c924fe elementor-widget elementor-widget-wd_text_block\" data-id=\"8c924fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_text_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"wd-text-block reset-last-child text-left\">\n\t\t\t\n\t\t\t<div class=\"tendify-seo-section\" style=\"background-color: #0b0f19; color: #f3f4f6; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; padding: 40px 24px; border-radius: 12px; border: 1px solid #1E293B; margin-top: 30px;\"><header style=\"margin-bottom: 40px;\"><h2 style=\"color: #ffffff; font-size: 28px; font-weight: 800; margin-bottom: 16px; tracking-tight: -0.025em;\">Optimize Your Cargo with Our Free <span style=\"color: #3b82f6;\">2D Pallet Loading Estimator<\/span><\/h2><p style=\"color: #9ca3af; font-size: 16px; line-height: 1.7; max-width: 800px;\">In international B2B trade and supply chain logistics, maximizing container and pallet space efficiency is paramount. The <strong>Tendify 2D Pallet Loading Estimator<\/strong> is a high-utility, web-based tool engineered to help freight forwarders, exporters, and warehouse managers calculate the exact number of cartons that can fit into a single pallet layer. Eliminate guesswork, minimize wasted space, and optimize your shipping costs instantly.<\/p><\/header><hr style=\"border: 0; border-top: 1px solid #1E293B; margin: 30px 0;\" \/><section style=\"margin-bottom: 40px;\"><h3 style=\"color: #ffffff; font-size: 20px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;\"><span style=\"color: #3b82f6;\">\u2022<\/span> How to Use the 2D Pallet Layout Calculator<\/h3><p style=\"color: #9ca3af; font-size: 15px; margin-bottom: 20px;\">Designed for seamless integration into daily logistics workflows, our simulator provides a live cargo map in three simple steps:<\/p><ol style=\"padding-left: 20px; color: #d1d5db; font-size: 15px; space-y: 12px; line-height: 1.8;\"><li style=\"list-style-type: none;\"><ol style=\"padding-left: 20px; color: #d1d5db; font-size: 15px; space-y: 12px; line-height: 1.8;\"><li style=\"margin-bottom: 12px;\"><strong style=\"color: #ffffff;\">Select or Define Pallet Dimensions:<\/strong> Choose from standard global presets including <strong>EUR 1 Euro Pallet (1200 x 800 mm)<\/strong>, <strong>EUR 2 Industrial Pallet (1200 x 1000 mm)<\/strong>, or standard <strong>US Pallets (1219 x 1016 mm)<\/strong>. Alternatively, input your custom dimensions.<\/li><li style=\"margin-bottom: 12px;\"><strong style=\"color: #ffffff;\">Enter Carton Specifications:<\/strong> Input the length and width of your boxes in millimeters. You can also specify a <em style=\"color: #3b82f6;\">Safety Margin<\/em> to account for protective edge boards or stretch wrap tolerances.<\/li><li style=\"margin-bottom: 12px;\"><strong style=\"color: #ffffff;\">Analyze the Visual Layout:<\/strong> Click \"Calculate Optimal Layout\". Our advanced algorithmic script tests multiple longitudinal, transverse, and hybrid side-fill patterns to render the highest-capacity 2D cargo map instantly.<\/li><\/ol><\/li><\/ol><p>\u00a0<\/p><\/section><hr style=\"border: 0; border-top: 1px solid #1E293B; margin: 30px 0;\" \/><section style=\"margin-bottom: 20px;\"><h3 style=\"color: #ffffff; font-size: 20px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;\"><span style=\"color: #10b981;\">\u2022<\/span> Key Benefits of Pallet Space Optimization<\/h3><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;\"><div style=\"background-color: #161f30; border: 1px solid #1E293B; padding: 20px; border-radius: 8px;\"><h4 style=\"color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 8px;\">Maximize Space Efficiency<\/h4><p style=\"color: #9ca3af; font-size: 14px; line-height: 1.6;\">Our hybrid block algorithm analyzes standard rows and rotated configurations simultaneously, ensuring you reach up to 95%+ pallet area utilization.<\/p><\/div><div style=\"background-color: #161f30; border: 1px solid #1E293B; padding: 20px; border-radius: 8px;\"><h4 style=\"color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 8px;\">Reduce Demurrage & Freight Costs<\/h4><p style=\"color: #9ca3af; font-size: 14px; line-height: 1.6;\">Accurate per-layer calculations prevent over-ordering or under-utilizing container volume, directly lowering your total cost per unit in international transit.<\/p><\/div><div style=\"background-color: #161f30; border: 1px solid #1E293B; padding: 20px; border-radius: 8px;\"><h4 style=\"color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 8px;\">Streamline Warehouse Operations<\/h4><p style=\"color: #9ca3af; font-size: 14px; line-height: 1.6;\">Provide your ground operations team with a clear, numbered 2D layout pattern before packing begins, drastically reducing loading times and handling errors.<\/p><\/div><\/div><\/section><footer style=\"margin-top: 40px; padding-top: 20px; border-top: 1px solid #1E293B; color: #4b5563; font-size: 12px; line-height: 1.5;\"><strong>Target Keywords:<\/strong> 2D Pallet Packing Software, Euro Pallet Calculator, Container Load Optimization, Cargo Layout Estimator, B2B Supply Chain Tools, Palletization Efficiency Simulator, Tendify Logistics Tools.<\/footer><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculate maximum carton capacity per pallet layer instantly. Use free 2D Pallet Loading Estimator to reduce shipping costs and eliminate wasted cargo space.<\/p>","protected":false},"author":15,"featured_media":18500,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[],"class_list":["post-18496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/comments?post=18496"}],"version-history":[{"count":3,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18496\/revisions"}],"predecessor-version":[{"id":18828,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18496\/revisions\/18828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18500"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}