{"id":18503,"date":"2026-06-22T05:59:36","date_gmt":"2026-06-22T05:59:36","guid":{"rendered":"https:\/\/tendify.net\/?p=18503"},"modified":"2026-07-15T05:25:50","modified_gmt":"2026-07-15T05:25:50","slug":"eta-planner-tool","status":"publish","type":"post","link":"https:\/\/tendify.net\/ar\/eta-planner-tool\/","title":{"rendered":"Free ETA Planner Tool: Calculate Cargo Lead Time"},"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 Trade Lead Time & ETA Planner - Tendify Premium<\/title>\r\n <!-- \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0648 \u0644\u0648\u06a9\u0633 \u062a\u0645 \u062a\u06cc\u0631\u0647 Tendify -->\r\n <style>\r\n :root {\r\n --bg-primary: #070a13;\r\n --bg-secondary: #0f172a;\r\n --bg-tertiary: #1e293b;\r\n --accent-cyan: #00f2fe;\r\n --accent-blue: #38bdf8;\r\n --accent-purple: #a855f7;\r\n --accent-orange: #f97316;\r\n --accent-gold: #fbbf24;\r\n --accent-gradient: linear-gradient(135deg, #00f2fe 0%, #3b82f6 100%);\r\n --text-main: #f8fafc;\r\n --text-muted: #94a3b8;\r\n --border-color: #334155;\r\n --success-color: #10b981;\r\n --error-color: #ef4444;\r\n --shadow-glow: 0 0 25px rgba(0, 242, 254, 0.12);\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-primary);\r\n color: var(--text-main);\r\n padding: 20px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0635\u0644\u06cc \u0648\u06cc\u062c\u062a \u0627\u0644\u0645\u0646\u062a\u0648\u0631 *\/\r\n .tendify-widget-container {\r\n width: 100%;\r\n max-width: 1200px;\r\n background-color: var(--bg-secondary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 24px;\r\n padding: 35px;\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), var(--shadow-glow);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u0647\u062f\u0631 \u0627\u0628\u0632\u0627\u0631 *\/\r\n .widget-header {\r\n text-align: center;\r\n margin-bottom: 35px;\r\n border-bottom: 1px solid var(--border-color);\r\n padding-bottom: 25px;\r\n position: relative;\r\n }\r\n\r\n .widget-header h1 {\r\n font-size: 2.2rem;\r\n font-weight: 800;\r\n background: var(--accent-gradient);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n margin-bottom: 10px;\r\n letter-spacing: -0.75px;\r\n }\r\n\r\n .widget-header p {\r\n color: var(--text-muted);\r\n font-size: 1rem;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* \u0633\u0627\u062e\u062a\u0627\u0631 \u0634\u0628\u06a9\u0647 \u062f\u0648 \u0633\u062a\u0648\u0646\u0647 *\/\r\n .widget-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 35px;\r\n }\r\n\r\n @media (min-width: 992px) {\r\n .widget-grid {\r\n grid-template-columns: 1.1fr 1.9fr;\r\n }\r\n }\r\n\r\n \/* \u067e\u0646\u0644 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0648 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 *\/\r\n .inputs-panel {\r\n background-color: rgba(30, 41, 59, 0.3);\r\n border: 1px solid var(--border-color);\r\n border-radius: 20px;\r\n padding: 25px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .panel-title {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--text-main);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .panel-title::before {\r\n content: '';\r\n display: inline-block;\r\n width: 5px;\r\n height: 20px;\r\n background: var(--accent-gradient);\r\n border-radius: 3px;\r\n }\r\n\r\n .input-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n\r\n .input-group label {\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n color: var(--text-muted);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .input-group label span.unit-hint {\r\n font-size: 0.75rem;\r\n color: var(--accent-blue);\r\n background: rgba(56, 189, 248, 0.1);\r\n padding: 2px 8px;\r\n border-radius: 10px;\r\n }\r\n\r\n .input-wrapper {\r\n position: relative;\r\n }\r\n\r\n .input-wrapper input {\r\n width: 100%;\r\n background-color: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n padding: 14px 16px;\r\n color: var(--text-main);\r\n font-size: 1rem;\r\n outline: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .input-wrapper input:focus {\r\n border-color: var(--accent-cyan);\r\n box-shadow: 0 0 12px rgba(0, 242, 254, 0.25);\r\n }\r\n\r\n \/* \u0633\u0648\u0626\u06cc\u0686 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0631\u0648\u0632\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0622\u062e\u0631 \u0647\u0641\u062a\u0647 *\/\r\n .toggle-group {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.02);\r\n padding: 12px 16px;\r\n border-radius: 12px;\r\n border: 1px dashed var(--border-color);\r\n margin-top: 5px;\r\n }\r\n\r\n .toggle-label {\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n color: var(--text-muted);\r\n }\r\n\r\n .toggle-switch {\r\n position: relative;\r\n display: inline-block;\r\n width: 46px;\r\n height: 24px;\r\n }\r\n\r\n .toggle-switch input {\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n .slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-color: var(--bg-tertiary);\r\n transition: .4s;\r\n border-radius: 24px;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .slider:before {\r\n position: absolute;\r\n content: \"\";\r\n height: 16px;\r\n width: 16px;\r\n left: 3px;\r\n bottom: 3px;\r\n background-color: var(--text-muted);\r\n transition: .4s;\r\n border-radius: 50%;\r\n }\r\n\r\n input:checked + .slider {\r\n background-color: var(--success-color);\r\n border-color: transparent;\r\n }\r\n\r\n input:checked + .slider:before {\r\n transform: translateX(22px);\r\n background-color: white;\r\n }\r\n\r\n \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0633\u0631\u06cc\u0639 *\/\r\n .preset-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n }\r\n\r\n @media (min-width: 480px) {\r\n .preset-grid {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n }\r\n\r\n .preset-btn {\r\n background-color: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 8px;\r\n padding: 10px 5px;\r\n color: var(--text-muted);\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n text-align: center;\r\n }\r\n\r\n .preset-btn:hover {\r\n border-color: var(--accent-cyan);\r\n color: var(--accent-cyan);\r\n background-color: rgba(0, 242, 254, 0.05);\r\n }\r\n\r\n .preset-btn.active {\r\n background: var(--accent-gradient);\r\n color: #000;\r\n border-color: transparent;\r\n font-weight: 700;\r\n box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25);\r\n }\r\n\r\n \/* \u067e\u0646\u0644 \u0646\u062a\u0627\u06cc\u062c *\/\r\n .results-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n\r\n \/* \u06a9\u0627\u0631\u062a \u0628\u0632\u0631\u06af \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc \u062a\u062d\u0648\u06cc\u0644 \u0628\u0627\u0631 *\/\r\n .eta-hero-card {\r\n background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n border: 1px solid var(--border-color);\r\n border-radius: 20px;\r\n padding: 30px;\r\n text-align: center;\r\n position: relative;\r\n box-shadow: var(--shadow-glow);\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n @media (min-width: 576px) {\r\n .eta-hero-card {\r\n grid-template-columns: 1.5fr 1fr;\r\n text-align: left;\r\n align-items: center;\r\n }\r\n }\r\n\r\n .eta-hero-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 4px;\r\n background: var(--accent-gradient);\r\n }\r\n\r\n .eta-info-left {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n\r\n .eta-label {\r\n font-size: 0.85rem;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n color: var(--accent-cyan);\r\n font-weight: 700;\r\n }\r\n\r\n .eta-date {\r\n font-size: 2.4rem;\r\n font-weight: 800;\r\n color: var(--text-main);\r\n letter-spacing: -0.5px;\r\n line-height: 1.2;\r\n }\r\n\r\n .eta-badges {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-top: 5px;\r\n }\r\n\r\n .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n }\r\n\r\n .badge-gold {\r\n background-color: rgba(251, 191, 36, 0.1);\r\n border: 1px solid var(--accent-gold);\r\n color: var(--accent-gold);\r\n }\r\n\r\n .badge-cyan {\r\n background-color: rgba(0, 242, 254, 0.1);\r\n border: 1px solid var(--accent-cyan);\r\n color: var(--accent-cyan);\r\n }\r\n\r\n \/* \u06a9\u0627\u0631\u062a \u0631\u06cc\u0633\u06a9 \u062a\u0627\u062e\u06cc\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0647\u06cc\u0631\u0648 *\/\r\n .risk-card {\r\n background-color: rgba(255, 255, 255, 0.02);\r\n border: 1px solid var(--border-color);\r\n border-radius: 14px;\r\n padding: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n text-align: center;\r\n }\r\n\r\n .risk-title {\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .risk-gauge-container {\r\n position: relative;\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n .risk-gauge-svg {\r\n transform: rotate(-90deg);\r\n }\r\n\r\n .risk-gauge-bg {\r\n fill: none;\r\n stroke: var(--bg-tertiary);\r\n stroke-width: 6;\r\n }\r\n\r\n .risk-gauge-val {\r\n fill: none;\r\n stroke-width: 6;\r\n stroke-linecap: round;\r\n transition: stroke-dasharray 0.5s ease;\r\n }\r\n\r\n .risk-percentage {\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 1rem;\r\n font-weight: 800;\r\n }\r\n\r\n .risk-desc {\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n }\r\n\r\n \/* \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646 \u0634\u06cc\u06a9 \u0645\u0631\u0627\u062d\u0644 *\/\r\n .timeline-container {\r\n background-color: rgba(30, 41, 59, 0.2);\r\n border: 1px solid var(--border-color);\r\n border-radius: 20px;\r\n padding: 25px;\r\n }\r\n\r\n .timeline {\r\n position: relative;\r\n padding-left: 35px;\r\n border-left: 2px dashed var(--border-color);\r\n margin-left: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 25px;\r\n }\r\n\r\n .timeline-progress-bar {\r\n position: absolute;\r\n top: 0; left: -2px; width: 2px;\r\n background: linear-gradient(to bottom, var(--accent-blue), var(--accent-orange), var(--accent-purple), var(--accent-gold));\r\n height: 100%;\r\n transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .timeline-step {\r\n position: relative;\r\n }\r\n\r\n .timeline-icon-node {\r\n position: absolute;\r\n left: -49px; top: 0;\r\n width: 30px; height: 30px;\r\n border-radius: 50%;\r\n background-color: var(--bg-secondary);\r\n border: 2px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.9rem;\r\n z-index: 2;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u062c\u0632\u0627\u06cc \u0647\u0631 \u0645\u0631\u062d\u0644\u0647 \u062f\u0631 \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646 *\/\r\n .step-etd .timeline-icon-node { border-color: var(--accent-blue); color: var(--accent-blue); }\r\n .step-port .timeline-icon-node { border-color: var(--accent-orange); color: var(--accent-orange); }\r\n .step-customs .timeline-icon-node { border-color: var(--accent-purple); color: var(--accent-purple); }\r\n .step-final .timeline-icon-node { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(251, 191, 36, 0.1); }\r\n\r\n .step-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .step-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .step-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: var(--text-main);\r\n }\r\n\r\n .step-duration {\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n padding: 3px 10px;\r\n border-radius: 20px;\r\n }\r\n\r\n .bg-dur-blue { background-color: rgba(56, 189, 248, 0.15); color: var(--accent-blue); }\r\n .bg-dur-orange { background-color: rgba(249, 115, 22, 0.15); color: var(--accent-orange); }\r\n .bg-dur-purple { background-color: rgba(168, 85, 247, 0.15); color: var(--accent-purple); }\r\n .bg-dur-gold { background-color: rgba(251, 191, 36, 0.15); color: var(--accent-gold); }\r\n\r\n .step-date {\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n }\r\n\r\n .step-desc {\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* \u0628\u062e\u0634 \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u062a\u0642\u0648\u06cc\u0645 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0646\u06af\u200c\u0628\u0646\u062f\u06cc \u0634\u062f\u0647 *\/\r\n .calendar-section {\r\n background-color: rgba(30, 41, 59, 0.2);\r\n border: 1px solid var(--border-color);\r\n border-radius: 20px;\r\n padding: 25px;\r\n }\r\n\r\n .calendar-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .calendar-nav {\r\n display: flex;\r\n gap: 8px;\r\n }\r\n\r\n .calendar-nav-btn {\r\n background-color: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n color: var(--text-main);\r\n width: 32px; height: 32px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .calendar-nav-btn:hover {\r\n border-color: var(--accent-cyan);\r\n color: var(--accent-cyan);\r\n }\r\n\r\n .calendar-legend {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n margin-bottom: 15px;\r\n border-bottom: 1px solid var(--border-color);\r\n padding-bottom: 12px;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n\r\n .legend-dot {\r\n width: 8px; height: 8px;\r\n border-radius: 50%;\r\n }\r\n\r\n .dot-blue { background-color: var(--accent-blue); }\r\n .dot-orange { background-color: var(--accent-orange); }\r\n .dot-purple { background-color: var(--accent-purple); }\r\n .dot-gold { background-color: var(--accent-gold); }\r\n\r\n .calendar-grid {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 8px;\r\n text-align: center;\r\n }\r\n\r\n .calendar-day-label {\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n font-weight: 700;\r\n padding-bottom: 8px;\r\n }\r\n\r\n .calendar-cell {\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n padding: 10px 0;\r\n color: rgba(255, 255, 255, 0.15); \/* \u0631\u0648\u0632\u0647\u0627\u06cc \u0645\u0627\u0647\u200c\u0647\u0627\u06cc \u0647\u0645\u0633\u0627\u06cc\u0647 *\/\r\n border-radius: 8px;\r\n transition: all 0.25s ease;\r\n position: relative;\r\n }\r\n\r\n .calendar-cell.active-month {\r\n color: var(--text-main);\r\n }\r\n\r\n \/* \u06a9\u062f\u0647\u0627\u06cc \u0631\u0646\u06af\u200c\u0622\u0645\u06cc\u0632\u06cc \u0628\u0627\u0632\u0647 \u0633\u0641\u0631\u0647\u0627 \u062f\u0631 \u062a\u0642\u0648\u06cc\u0645 *\/\r\n .calendar-cell.cal-etd {\r\n background-color: rgba(56, 189, 248, 0.2);\r\n border: 1px solid var(--accent-blue);\r\n font-weight: 700;\r\n }\r\n .calendar-cell.cal-transit {\r\n background-color: rgba(56, 189, 248, 0.08);\r\n border-bottom: 2px solid var(--accent-blue);\r\n }\r\n .calendar-cell.cal-port {\r\n background-color: rgba(249, 115, 22, 0.2);\r\n border: 1px solid var(--accent-orange);\r\n font-weight: 700;\r\n }\r\n .calendar-cell.cal-customs {\r\n background-color: rgba(249, 115, 22, 0.08);\r\n border-bottom: 2px solid var(--accent-orange);\r\n }\r\n .calendar-cell.cal-cleared {\r\n background-color: rgba(168, 85, 247, 0.25);\r\n border: 1px solid var(--accent-purple);\r\n font-weight: 700;\r\n }\r\n .calendar-cell.cal-inland {\r\n background-color: rgba(168, 85, 247, 0.08);\r\n border-bottom: 2px solid var(--accent-purple);\r\n }\r\n .calendar-cell.cal-final-eta {\r\n background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\r\n color: #000 !important;\r\n font-weight: 800;\r\n box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);\r\n transform: scale(1.05);\r\n z-index: 5;\r\n }\r\n\r\n \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u067e\u06cc \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 *\/\r\n .action-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 15px;\r\n }\r\n\r\n @media (min-width: 576px) {\r\n .action-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n .action-btn {\r\n background-color: var(--bg-tertiary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n padding: 14px 20px;\r\n color: var(--text-main);\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n\r\n .action-btn:hover {\r\n border-color: var(--accent-cyan);\r\n background-color: rgba(0, 242, 254, 0.03);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .action-btn-primary {\r\n background: var(--accent-gradient);\r\n color: #000;\r\n border: none;\r\n box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);\r\n }\r\n\r\n .action-btn-primary:hover {\r\n background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);\r\n color: #000;\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(56, 189, 248, 0.3);\r\n }\r\n\r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0686\u0627\u067e\u06cc (\u062a\u0645\u06cc\u0632 \u0648 \u0633\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc PDF\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc) *\/\r\n @media print {\r\n body {\r\n background: white !important;\r\n color: black !important;\r\n padding: 0;\r\n }\r\n .tendify-widget-container {\r\n box-shadow: none !important;\r\n border: none !important;\r\n background: white !important;\r\n color: black !important;\r\n max-width: 100% !important;\r\n padding: 0 !important;\r\n }\r\n .inputs-panel, .action-grid, .toggle-group, .preset-grid, .calendar-nav {\r\n display: none !important;\r\n }\r\n .widget-grid {\r\n grid-template-columns: 1fr !important;\r\n }\r\n .eta-hero-card {\r\n background: #f1f5f9 !important;\r\n border: 1px solid #cbd5e1 !important;\r\n color: #0f172a !important;\r\n page-break-inside: avoid;\r\n }\r\n .eta-hero-card::before {\r\n display: none;\r\n }\r\n .eta-date {\r\n color: #0f172a !important;\r\n }\r\n .timeline-container, .calendar-section {\r\n background: white !important;\r\n border: 1px solid #cbd5e1 !important;\r\n page-break-inside: avoid;\r\n }\r\n .step-title, .calendar-month-year {\r\n color: #0f172a !important;\r\n }\r\n .step-desc {\r\n color: #475569 !important;\r\n }\r\n }\r\n\r\n \/* \u0627\u0639\u0644\u0627\u0646 \u0646\u0648\u062a\u06cc\u0641\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc *\/\r\n .toast-notification {\r\n position: fixed;\r\n bottom: -100px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: var(--success-color);\r\n color: white;\r\n padding: 14px 28px;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35);\r\n z-index: 1000;\r\n transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .toast-notification.show {\r\n bottom: 40px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"tendify-widget-container\">\r\n <!-- \u0647\u062f\u0631 \u0627\u0628\u0632\u0627\u0631 \u0645\u0646\u0627\u0633\u0628 \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0631 \u0633\u0627\u06cc\u062a -->\r\n <div class=\"widget-header\">\r\n <h1>Trade Lead Time & ETA Planner<\/h1>\r\n <p>Design a strategic logistics schedule, allocate safety buffers, exclude weekends, and map dynamic milestone ETAs.<\/p>\r\n <\/div>\r\n\r\n <div class=\"widget-grid\">\r\n <!-- \u0633\u062a\u0648\u0646 \u0686\u067e: \u067e\u0646\u0644 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 -->\r\n <div class=\"inputs-panel\">\r\n <div class=\"panel-title\">1. Logistics Strategy<\/div>\r\n\r\n <!-- \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u200c\u0647\u0627\u06cc \u062d\u0645\u0644 \u0648 \u0646\u0642\u0644 \u0633\u0631\u06cc\u0639 -->\r\n <div class=\"input-group\">\r\n <label>Shipping Channel Presets<\/label>\r\n <div class=\"preset-grid\">\r\n <button class=\"preset-btn active\" onclick=\"applyPreset(25, 5, 2, 45, this)\">Std Sea<\/button>\r\n <button class=\"preset-btn\" onclick=\"applyPreset(14, 4, 1, 30, this)\">Exp Sea<\/button>\r\n <button class=\"preset-btn\" onclick=\"applyPreset(12, 5, 2, 20, this)\">Rail<\/button>\r\n <button class=\"preset-btn\" onclick=\"applyPreset(5, 2, 1, 10, this)\">Air Cargo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062a\u0627\u0631\u06cc\u062e \u062d\u0631\u06a9\u062a \u06a9\u0634\u062a\u06cc ETD -->\r\n <div class=\"input-group\">\r\n <label for=\"etd-input\">Estimated Time of Departure (ETD)<\/label>\r\n <div class=\"input-wrapper\">\r\n <input type=\"date\" id=\"etd-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel-title\" style=\"margin-top: 10px;\">2. Durations & Operation<\/div>\r\n\r\n <!-- \u062a\u0631\u0627\u0646\u0632\u06cc\u062a \u062a\u0627\u06cc\u0645 \u062f\u0631\u06cc\u0627\u06cc\u06cc -->\r\n <div class=\"input-group\">\r\n <label for=\"transit-input\">\r\n Ocean Transit Time\r\n <span class=\"unit-hint\">Days<\/span>\r\n <\/label>\r\n <div class=\"input-wrapper\">\r\n <input type=\"number\" id=\"transit-input\" min=\"1\" max=\"120\" value=\"25\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062a\u0631\u062e\u06cc\u0635 \u06af\u0645\u0631\u06a9 -->\r\n <div class=\"input-group\">\r\n <label for=\"customs-input\">\r\n Customs Clearance\r\n <span class=\"unit-hint\">Days<\/span>\r\n <\/label>\r\n <div class=\"input-wrapper\">\r\n <input type=\"number\" id=\"customs-input\" min=\"1\" max=\"30\" value=\"5\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062d\u0645\u0644 \u062f\u0627\u062e\u0644\u06cc -->\r\n <div class=\"input-group\">\r\n <label for=\"inland-input\">\r\n Inland Transport \/ Final Leg\r\n <span class=\"unit-hint\">Days<\/span>\r\n <\/label>\r\n <div class=\"input-wrapper\">\r\n <input type=\"number\" id=\"inland-input\" min=\"1\" max=\"30\" value=\"2\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0633\u0648\u0626\u06cc\u0686 \u06a9\u0646\u0627\u0631 \u06af\u0630\u0627\u0634\u062a\u0646 \u0622\u062e\u0631 \u0647\u0641\u062a\u0647\u200c\u0647\u0627 -->\r\n <div class=\"toggle-group\">\r\n <span class=\"toggle-label\">Exclude Weekends (Sat\/Sun)<\/span>\r\n <label class=\"toggle-switch\">\r\n <input type=\"checkbox\" id=\"exclude-weekends\" checked>\r\n <span class=\"slider\"><\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <!-- \u0628\u0627\u0641\u0631 \u0627\u0645\u0646\u06cc\u062a \u0632\u0645\u0627\u0646\u06cc -->\r\n <div class=\"input-group\" style=\"margin-top: 5px;\">\r\n <label for=\"buffer-input\">\r\n Safety Buffer Contingency\r\n <span class=\"unit-hint\" style=\"background:rgba(251,191,36,0.1); color:var(--accent-gold);\">Days Buffer<\/span>\r\n <\/label>\r\n <div class=\"input-wrapper\">\r\n <input type=\"number\" id=\"buffer-input\" min=\"0\" max=\"15\" value=\"2\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0633\u062a\u0648\u0646 \u0631\u0627\u0633\u062a: \u0646\u0645\u0627\u06cc\u0634 \u0646\u062a\u0627\u06cc\u062c\u060c \u0646\u0645\u0648\u062f\u0627\u0631\u060c \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646 \u0648 \u062a\u0642\u0648\u06cc\u0645 -->\r\n <div class=\"results-panel\">\r\n <!-- \u0647\u06cc\u0631\u0648 \u06a9\u0627\u0631\u062a \u0628\u0632\u0631\u06af \u0646\u0645\u0627\u06cc\u0634 \u0646\u062a\u0627\u06cc\u062c -->\r\n <div class=\"eta-hero-card\">\r\n <div class=\"eta-info-left\">\r\n <div class=\"eta-label\">Calculated Cargo ETA<\/div>\r\n <div class=\"eta-date\" id=\"eta-display\">Calculating...<\/div>\r\n <div class=\"eta-badges\">\r\n <span class=\"badge badge-gold\" id=\"total-days-display\">Total: -- Days<\/span>\r\n <span class=\"badge badge-cyan\" id=\"working-days-display\">Working: -- Days<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0631\u0627\u062f\u0627\u0631 \u0631\u06cc\u0633\u06a9 \u062a\u0627\u062e\u06cc\u0631 -->\r\n <div class=\"risk-card\">\r\n <div class=\"risk-title\">Delay Risk Level<\/div>\r\n <div class=\"risk-gauge-container\">\r\n <svg class=\"risk-gauge-svg\" width=\"70\" height=\"70\">\r\n <circle class=\"risk-gauge-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\r\n <circle class=\"risk-gauge-val\" id=\"risk-stroke\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188\" stroke-dashoffset=\"188\"><\/circle>\r\n <\/svg>\r\n <span class=\"risk-percentage\" id=\"risk-percentage\">0%<\/span>\r\n <\/div>\r\n <div class=\"risk-desc\" id=\"risk-desc\" style=\"color: var(--success-color);\">Calculated...<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0644\u0648\u062c\u0633\u062a\u06cc\u06a9 -->\r\n <div class=\"timeline-container\">\r\n <div class=\"panel-title\" style=\"margin-bottom: 25px;\">Milestone Timeline<\/div>\r\n <div class=\"timeline\">\r\n <div class=\"timeline-progress-bar\" id=\"timeline-progress\"><\/div>\r\n\r\n <!-- \u0645\u0628\u062f\u0627 -->\r\n <div class=\"timeline-step step-etd\">\r\n <div class=\"timeline-icon-node\">\ud83d\udea2<\/div>\r\n <div class=\"step-info\">\r\n <div class=\"step-header\">\r\n <span class=\"step-title\">Origin Vessel Departure (ETD)<\/span>\r\n <\/div>\r\n <span class=\"step-date\" id=\"step-etd-date\">--<\/span>\r\n <span class=\"step-desc\">Port operations completed, cargo sets sail<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0645\u0642\u0635\u062f \u0628\u0646\u062f\u0631 \u062a\u062e\u0644\u06cc\u0647 -->\r\n <div class=\"timeline-step step-port\">\r\n <div class=\"timeline-icon-node\">\u2693<\/div>\r\n <div class=\"step-info\">\r\n <div class=\"step-header\">\r\n <span class=\"step-title\">Destination Port Arrival (ATA)<\/span>\r\n <span class=\"step-duration bg-dur-blue\" id=\"step-ocean-duration\">--<\/span>\r\n <\/div>\r\n <span class=\"step-date\" id=\"step-discharge-date\">--<\/span>\r\n <span class=\"step-desc\">Vessel arrives, unloading & port handling begin<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u062a\u0645\u0627\u0645 \u062a\u0631\u062e\u06cc\u0635 -->\r\n <div class=\"timeline-step step-customs\">\r\n <div class=\"timeline-icon-node\">\ud83d\udcdc<\/div>\r\n <div class=\"step-info\">\r\n <div class=\"step-header\">\r\n <span class=\"step-title\">Customs Released<\/span>\r\n <span class=\"step-duration bg-dur-orange\" id=\"step-customs-duration\">--<\/span>\r\n <\/div>\r\n <span class=\"step-date\" id=\"step-customs-date\">--<\/span>\r\n <span class=\"step-desc\">Import customs declarations & inspections finalized<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0646\u0628\u0627\u0631 \u0645\u0642\u0635\u062f \u0646\u0647\u0627\u06cc\u06cc -->\r\n <div class=\"timeline-step step-final\">\r\n <div class=\"timeline-icon-node\">\ud83c\udfe2<\/div>\r\n <div class=\"step-info\">\r\n <div class=\"step-header\">\r\n <span class=\"step-title\" style=\"color: var(--accent-gold);\">Warehouse Delivery (ETA)<\/span>\r\n <span class=\"step-duration bg-dur-purple\" id=\"step-inland-duration\">--<\/span>\r\n <\/div>\r\n <span class=\"step-date\" id=\"step-destination-date\" style=\"color: var(--accent-gold); font-size: 1.05rem;\">--<\/span>\r\n <span class=\"step-desc\" id=\"step-final-desc\">Cargo unloaded & ready for inventory distribution<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0628\u062e\u0634 \u062a\u0642\u0648\u06cc\u0645 \u0631\u0646\u06af\u200c\u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u06a9\u0644\u0627\u0646 -->\r\n <div class=\"calendar-section\">\r\n <div class=\"calendar-header\">\r\n <div class=\"calendar-month-year\" id=\"calendar-title\" style=\"font-weight: 700; font-size: 1.1rem;\">Month Year<\/div>\r\n <div class=\"calendar-nav\">\r\n <button class=\"calendar-nav-btn\" onclick=\"shiftMonth(-1)\">\u25c0<\/button>\r\n <button class=\"calendar-nav-btn\" onclick=\"shiftMonth(1)\">\u25b6<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"calendar-legend\">\r\n <div class=\"legend-item\"><span class=\"legend-dot dot-blue\"><\/span> Sea Voyage<\/div>\r\n <div class=\"legend-item\"><span class=\"legend-dot dot-orange\"><\/span> Customs Clearance<\/div>\r\n <div class=\"legend-item\"><span class=\"legend-dot dot-purple\"><\/span> Inland Transport<\/div>\r\n <div class=\"legend-item\"><span class=\"legend-dot dot-gold\"><\/span> ETA Delivery<\/div>\r\n <\/div>\r\n\r\n <div class=\"calendar-grid\" id=\"calendar-grid\">\r\n <!-- \u0631\u0648\u0632\u0647\u0627 \u0648 \u0647\u062f\u0631\u0647\u0627\u06cc \u062a\u0642\u0648\u06cc\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u067e\u0631\u06cc\u0646\u062a \u0648 \u06a9\u067e\u06cc \u062e\u0644\u0627\u0635\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 -->\r\n <div class=\"action-grid\">\r\n <button class=\"action-btn\" onclick=\"copyPlanSummary()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\r\n Copy Schedule Summary\r\n <\/button>\r\n <button class=\"action-btn action-btn-primary\" onclick=\"window.print()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 6 2 18 2 18 9\"><\/polyline><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"><\/path><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"><\/rect><\/svg>\r\n Print & Save PDF Report\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0646\u0648\u062a\u06cc\u0641\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc -->\r\n <div class=\"toast-notification\" id=\"toast\">\r\n \ud83d\udccb Full timeline schedule copied to clipboard!\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u0622\u0628\u062c\u06a9\u062a \u062c\u0647\u0627\u0646\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u0644\u0648\u062c\u0633\u062a\u06cc\u06a9\u06cc\r\n let calculationResults = {\r\n etd: null,\r\n portArrival: null,\r\n customsCleared: null,\r\n finalEta: null,\r\n transitDays: 0,\r\n customsDays: 0,\r\n inlandDays: 0,\r\n bufferDays: 0,\r\n totalCalendarDays: 0,\r\n workingDays: 0,\r\n riskPercent: 0,\r\n riskClass: ''\r\n };\r\n\r\n \/\/ \u0645\u062a\u063a\u06cc\u0631 \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0645\u0627\u0647\u0650 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u062a\u0642\u0648\u06cc\u0645\r\n let calendarBaseDate = new Date();\r\n\r\n window.addEventListener('load', () => {\r\n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u062a\u0627\u0631\u06cc\u062e \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0631\u0627\u06cc ETD (\u0627\u0645\u0631\u0648\u0632)\r\n const today = new Date();\r\n const year = today.getFullYear();\r\n const month = String(today.getMonth() + 1).padStart(2, '0');\r\n const day = String(today.getDate()).padStart(2, '0');\r\n document.getElementById('etd-input').value = `${year}-${month}-${day}`;\r\n\r\n \/\/ \u0627\u062c\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0645\u062d\u0627\u0633\u0628\u0647\r\n calculateSchedule();\r\n\r\n \/\/ \u0646\u0633\u0628\u062a \u062f\u0627\u062f\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0632\u0646\u062f\u0647 \u0628\u0647 \u062a\u0645\u0627\u0645 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 \u062c\u0647\u062a \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0622\u0646\u06cc\r\n const inputs = ['etd-input', 'transit-input', 'customs-input', 'inland-input', 'buffer-input', 'exclude-weekends'];\r\n inputs.forEach(id => {\r\n document.getElementById(id).addEventListener('change', calculateSchedule);\r\n document.getElementById(id).addEventListener('input', calculateSchedule);\r\n });\r\n });\r\n\r\n \/\/ \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0627\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u062a\u0642\u0648\u06cc\u0645\r\n function shiftMonth(direction) {\r\n calendarBaseDate.setMonth(calendarBaseDate.getMonth() + direction);\r\n buildCalendar(calendarBaseDate);\r\n }\r\n\r\n \/\/ \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u06a9\u0627\u0646\u0627\u0644 \u062d\u0645\u0644 \u0628\u0627 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u062a\u0627\u062e\u06cc\u0631 \u0631\u06cc\u0633\u06a9 \u0646\u0633\u0628\u06cc\r\n function applyPreset(transit, customs, inland, baseRisk, btnElement) {\r\n document.getElementById('transit-input').value = transit;\r\n document.getElementById('customs-input').value = customs;\r\n document.getElementById('inland-input').value = inland;\r\n\r\n \/\/ \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062f\u06a9\u0645\u0647 \u0627\u06a9\u062a\u06cc\u0648\r\n document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));\r\n btnElement.classList.add('active');\r\n\r\n calculateSchedule();\r\n }\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u06cc\u06a9 \u0631\u0648\u0632 \u062e\u0627\u0635 \u0622\u062e\u0631 \u0647\u0641\u062a\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631\r\n function isWeekend(date) {\r\n const day = date.getDay();\r\n return day === 0 || day === 6; \/\/ 0: Sunday, 6: Saturday\r\n }\r\n\r\n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0631\u0648\u0632\u0647\u0627 \u0628\u0627 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0646 \u0633\u0648\u0626\u06cc\u0686 \u0631\u0648\u0632\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc (Exclude Weekends)\r\n function addDays(startDate, daysToAdd, applyWeekendExclusion) {\r\n let currentDate = new Date(startDate);\r\n let added = 0;\r\n\r\n if (!applyWeekendExclusion) {\r\n currentDate.setDate(currentDate.getDate() + daysToAdd);\r\n return currentDate;\r\n }\r\n\r\n while (added < daysToAdd) {\r\n currentDate.setDate(currentDate.getDate() + 1);\r\n if (!isWeekend(currentDate)) {\r\n added++;\r\n }\r\n }\r\n return currentDate;\r\n }\r\n\r\n \/\/ \u0641\u0631\u0645\u062a \u06a9\u0631\u062f\u0646 \u062a\u0627\u0631\u06cc\u062e \u0645\u06cc\u0644\u0627\u062f\u06cc \u0628\u0627 \u0634\u06a9\u0644 \u0646\u06af\u0627\u0631\u0634\u06cc \u0634\u06cc\u06a9 \u0648 \u062e\u0648\u0627\u0646\u0627\r\n function formatDatePretty(date) {\r\n const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };\r\n return date.toLocaleDateString('en-US', options);\r\n }\r\n\r\n \/\/ \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0627\u0635\u0644\u06cc \u0644\u0648\u062c\u0633\u062a\u06cc\u06a9 \u0648 \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0632\u0646\u062c\u06cc\u0631\u0647 \u062a\u0627\u0645\u06cc\u0646\r\n function calculateSchedule() {\r\n const etdVal = document.getElementById('etd-input').value;\r\n if (!etdVal) return;\r\n\r\n const transitDays = parseInt(document.getElementById('transit-input').value) || 0;\r\n const customsDays = parseInt(document.getElementById('customs-input').value) || 0;\r\n const inlandDays = parseInt(document.getElementById('inland-input').value) || 0;\r\n const bufferDays = parseInt(document.getElementById('buffer-input').value) || 0;\r\n const excludeWeekends = document.getElementById('exclude-weekends').checked;\r\n\r\n \/\/ \u0634\u0631\u0648\u0639 \u0641\u0631\u0622\u06cc\u0646\u062f \u0645\u062d\u0627\u0633\u0628\u0647 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0631\u0627\u062d\u0644\r\n const etdDate = new Date(etdVal + 'T00:00:00');\r\n\r\n \/\/ \u0645\u0631\u062d\u0644\u0647 \u06f1: \u062a\u0631\u0627\u0646\u0632\u06cc\u062a \u062f\u0631\u06cc\u0627\u06cc\u06cc (\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646 \u0633\u0641\u0631 \u0645\u0633\u062a\u062b\u0646\u06cc \u06a9\u0631\u062f\u0646 \u0622\u062e\u0631 \u0647\u0641\u062a\u0647 \u0627\u0639\u0645\u0627\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f \u0686\u0648\u0646 \u06a9\u0634\u062a\u06cc \u062f\u0631 \u062f\u0631\u06cc\u0627 \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f)\r\n const portArrivalDate = addDays(etdDate, transitDays, false);\r\n\r\n \/\/ \u0645\u0631\u062d\u0644\u0647 \u06f2: \u062a\u0631\u062e\u06cc\u0635 \u06af\u0645\u0631\u06a9\u06cc (\u062a\u062d\u062a \u062a\u0627\u062b\u06cc\u0631 \u0633\u0648\u0626\u06cc\u0686 \u0627\u0633\u062a\u062b\u0646\u0627 \u06a9\u0631\u062f\u0646 \u0631\u0648\u0632\u0647\u0627\u06cc \u062a\u0639\u0637\u06cc\u0644)\r\n const customsClearedDate = addDays(portArrivalDate, customsDays, excludeWeekends);\r\n\r\n \/\/ \u0645\u0631\u062d\u0644\u0647 \u06f3: \u062a\u0631\u0627\u0646\u0632\u06cc\u062a \u0645\u062d\u0644\u06cc \u0632\u0645\u06cc\u0646\u06cc (\u062a\u062d\u062a \u062a\u0627\u062b\u06cc\u0631 \u0633\u0648\u0626\u06cc\u0686 \u0627\u0633\u062a\u062b\u0646\u0627 \u06a9\u0631\u062f\u0646 \u0631\u0648\u0632\u0647\u0627\u06cc \u062a\u0639\u0637\u06cc\u0644)\r\n let finalEtaDate = addDays(customsClearedDate, inlandDays, excludeWeekends);\r\n\r\n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0631\u0648\u0632\u0647\u0627\u06cc \u0628\u0627\u0641\u0631 \u062d\u0627\u0634\u06cc\u0647 \u0627\u0645\u0646\u06cc\u062a (\u062f\u0631 \u0631\u0648\u0632\u0647\u0627\u06cc \u062a\u0642\u0648\u06cc\u0645\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f)\r\n if (bufferDays > 0) {\r\n finalEtaDate.setDate(finalEtaDate.getDate() + bufferDays);\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u062a\u0639\u062f\u0627\u062f \u0631\u0648\u0632\u0647\u0627\u06cc \u06a9\u0644 \u062a\u0642\u0648\u06cc\u0645\u06cc \u0648 \u0631\u0648\u0632\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648\u0627\u0642\u0639\u06cc\r\n const diffTime = Math.abs(finalEtaDate - etdDate);\r\n const totalCalendarDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\r\n\r\n let workingDays = 0;\r\n let tempDate = new Date(etdDate);\r\n while (tempDate <= finalEtaDate) {\r\n if (!isWeekend(tempDate)) {\r\n workingDays++;\r\n }\r\n tempDate.setDate(tempDate.getDate() + 1);\r\n }\r\n\r\n \/\/ \u0641\u0631\u0645\u0648\u0644 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0631\u06cc\u0633\u06a9 \u0632\u0646\u062c\u06cc\u0631\u0647 \u062a\u0627\u0645\u06cc\u0646 (\u0628\u0631 \u067e\u0627\u06cc\u0647 \u0631\u0648\u0632\u0647\u0627\u06cc \u0645\u0633\u06cc\u0631\u060c \u0622\u062e\u0631 \u0647\u0641\u062a\u0647\u200c\u0647\u0627 \u0648 \u0628\u0627\u0641\u0631 \u0627\u0645\u0646\u06cc\u062a)\r\n let rawRisk = (transitDays * 1.5 + customsDays * 3 + inlandDays * 2);\r\n \/\/ \u0628\u0627\u0641\u0631 \u0631\u0648\u0632 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0631\u06cc\u0633\u06a9 \u0631\u0627 \u0628\u0647 \u0634\u062f\u062a \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f\r\n rawRisk = rawRisk - (bufferDays * 12);\r\n let riskPercent = Math.max(5, Math.min(98, Math.round(rawRisk)));\r\n\r\n let riskDesc = \"Low Risk\";\r\n let riskColor = \"var(--success-color)\";\r\n if (riskPercent > 40 && riskPercent <= 70) {\r\n riskDesc = \"Medium Risk\";\r\n riskColor = \"var(--accent-gold)\";\r\n } else if (riskPercent > 70) {\r\n riskDesc = \"High Risk\";\r\n riskColor = \"var(--error-color)\";\r\n }\r\n\r\n \/\/ \u0630\u062e\u06cc\u0631\u0647 \u0646\u062a\u0627\u06cc\u062c \u06a9\u0644\u0627\u0646 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631 \u06af\u0644\u0648\u0628\u0627\u0644\r\n calculationResults = {\r\n etd: etdDate,\r\n portArrival: portArrivalDate,\r\n customsCleared: customsClearedDate,\r\n finalEta: finalEtaDate,\r\n transitDays,\r\n customsDays,\r\n inlandDays,\r\n bufferDays,\r\n totalCalendarDays,\r\n workingDays,\r\n riskPercent,\r\n riskDesc\r\n };\r\n\r\n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0635\u0641\u062d\u0647 \u062a\u0642\u0648\u06cc\u0645 \u067e\u0627\u06cc\u0647 \u0628\u0647 \u0645\u0627\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0647\u0627\u06cc\u06cc \u0628\u0627\u0631\r\n calendarBaseDate = new Date(finalEtaDate);\r\n\r\n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627\u06cc DOM\r\n document.getElementById('eta-display').textContent = formatDatePretty(finalEtaDate);\r\n document.getElementById('total-days-display').textContent = `Total: ${totalCalendarDays} Cal Days`;\r\n document.getElementById('working-days-display').textContent = `Working: ${workingDays} Days`;\r\n\r\n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0627\u0631\u062a \u0633\u0646\u062c\u0634 \u0631\u06cc\u0633\u06a9\r\n document.getElementById('risk-percentage').textContent = `${riskPercent}%`;\r\n document.getElementById('risk-desc').textContent = riskDesc;\r\n document.getElementById('risk-desc').style.color = riskColor;\r\n\r\n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0627\u06cc\u0631\u0647 \u0631\u06cc\u0633\u06a9 \u0633\u0646\u062c \u0628\u0627 SVG\r\n const strokeOffset = 188 - (188 * riskPercent) \/ 100;\r\n const strokeEl = document.getElementById('risk-stroke');\r\n strokeEl.style.strokeDashoffset = strokeOffset;\r\n strokeEl.style.stroke = riskColor;\r\n\r\n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0632\u0645\u0627\u0646\u06cc \u062f\u0631 \u062a\u0627\u06cc\u0645\u200c\u0644\u0627\u06cc\u0646 \u0628\u0635\u0631\u06cc\r\n document.getElementById('step-etd-date').textContent = formatDatePretty(etdDate);\r\n \r\n document.getElementById('step-discharge-date').textContent = formatDatePretty(portArrivalDate);\r\n document.getElementById('step-ocean-duration').textContent = `+${transitDays}d voyage`;\r\n\r\n document.getElementById('step-customs-date').textContent = formatDatePretty(customsClearedDate);\r\n document.getElementById('step-customs-duration').textContent = `+${customsDays}d customs`;\r\n\r\n document.getElementById('step-destination-date').textContent = formatDatePretty(finalEtaDate);\r\n document.getElementById('step-inland-duration').textContent = `+${inlandDays}d inland`;\r\n\r\n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062c\u0632\u06cc\u06cc\u0627\u062a \u0631\u0648\u0632\u0647\u0627\u06cc \u0628\u0627\u0641\u0631 \u062f\u0631 \u062f\u0633\u06a9\u0631\u06cc\u067e\u0634\u0646 \u0645\u0631\u062d\u0644\u0647 \u0646\u0647\u0627\u06cc\u06cc\r\n const bufferText = bufferDays > 0 ? ` (Includes ${bufferDays} days Safety Buffer)` : '';\r\n document.getElementById('step-final-desc').textContent = `Cargo safely unloaded at target destination warehouse${bufferText}.`;\r\n\r\n \/\/ \u06a9\u0634\u06cc\u062f\u0646 \u062a\u0642\u0648\u06cc\u0645 \u0686\u0646\u062f \u06a9\u0627\u0631\u0647 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u0634\u062f\u0647\r\n buildCalendar(calendarBaseDate);\r\n }\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u062a\u0627\u0631\u06cc\u062e \u062e\u0627\u0635 \u062f\u0631 \u0686\u0647 \u0628\u0627\u0632\u0647\u200c\u0627\u06cc \u0627\u0632 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u0631\u0633\u0627\u0644 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f\r\n function getLogisticsPhaseClass(date) {\r\n \/\/ \u0646\u0631\u0645\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u062a\u0627\u0631\u06cc\u062e \u0628\u0631\u0627\u06cc \u0645\u0642\u0627\u06cc\u0633\u0647 \u062f\u0642\u06cc\u0642 \u0628\u062f\u0648\u0646 \u0633\u0627\u0639\u062a\r\n const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();\r\n const etd = new Date(calculationResults.etd.getFullYear(), calculationResults.etd.getMonth(), calculationResults.etd.getDate()).getTime();\r\n const port = new Date(calculationResults.portArrival.getFullYear(), calculationResults.portArrival.getMonth(), calculationResults.portArrival.getDate()).getTime();\r\n const customs = new Date(calculationResults.customsCleared.getFullYear(), calculationResults.customsCleared.getMonth(), calculationResults.customsCleared.getDate()).getTime();\r\n const eta = new Date(calculationResults.finalEta.getFullYear(), calculationResults.finalEta.getMonth(), calculationResults.finalEta.getDate()).getTime();\r\n\r\n if (d === eta) return 'cal-final-eta';\r\n if (d === etd) return 'cal-etd';\r\n if (d > etd && d < port) return 'cal-transit';\r\n if (d === port) return 'cal-port';\r\n if (d > port && d < customs) return 'cal-customs';\r\n if (d === customs) return 'cal-cleared';\r\n if (d > customs && d < eta) return 'cal-inland';\r\n return '';\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u06a9\u0627\u0645\u0644\u0627\u064b \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u062a\u0642\u0648\u06cc\u0645 \u0628\u0627 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u0686\u0646\u062f\u0645\u0631\u062d\u0644\u0647\u200c\u0627\u06cc\r\n function buildCalendar(viewDate) {\r\n const grid = document.getElementById('calendar-grid');\r\n grid.innerHTML = ''; \/\/ \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\r\n\r\n const monthNames = [\r\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\r\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\r\n ];\r\n\r\n const year = viewDate.getFullYear();\r\n const month = viewDate.getMonth();\r\n\r\n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u062a\u0627\u06cc\u062a\u0644 \u0628\u0627\u0644\u0627\u06cc \u062a\u0642\u0648\u06cc\u0645\r\n document.getElementById('calendar-title').textContent = `${monthNames[month]} ${year}`;\r\n\r\n \/\/ \u0631\u0633\u0645 \u0631\u062f\u06cc\u0641 \u0647\u062f\u0631 \u0631\u0648\u0632\u0647\u0627\u06cc \u0647\u0641\u062a\u0647\r\n const daysOfWeek = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\r\n daysOfWeek.forEach(dayName => {\r\n const label = document.createElement('div');\r\n label.className = 'calendar-day-label';\r\n label.textContent = dayName;\r\n grid.appendChild(label);\r\n });\r\n\r\n \/\/ \u0631\u0648\u0632 \u0634\u0631\u0648\u0639 \u0645\u0627\u0647 \u0628\u0647 \u0634\u06a9\u0644 \u0627\u0646\u062f\u06cc\u0633 \u0647\u0641\u062a\u0647\r\n const firstDayIndex = new Date(year, month, 1).getDay();\r\n \/\/ \u062a\u0639\u062f\u0627\u062f \u06a9\u0644 \u0631\u0648\u0632\u0647\u0627\u06cc \u0645\u0627\u0647 \u062c\u0627\u0631\u06cc\r\n const totalDaysInMonth = new Date(year, month + 1, 0).getDate();\r\n\r\n \/\/ \u0631\u0633\u0645 \u0631\u0648\u0632\u0647\u0627\u06cc \u062e\u0627\u0644\u06cc \u0645\u0627\u0647 \u0642\u0628\u0644 \u0628\u0631\u0627\u06cc \u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u06af\u0631\u06cc\u062f\r\n const prevMonthDays = new Date(year, month, 0).getDate();\r\n for (let i = firstDayIndex - 1; i >= 0; i--) {\r\n const cell = document.createElement('div');\r\n cell.className = 'calendar-cell';\r\n cell.textContent = prevMonthDays - i;\r\n grid.appendChild(cell);\r\n }\r\n\r\n \/\/ \u062a\u0631\u0633\u06cc\u0645 \u0648 \u0631\u0646\u06af\u200c\u0622\u0645\u06cc\u0632\u06cc \u0631\u0648\u0632\u0647\u0627\u06cc \u0645\u0627\u0647 \u062c\u0627\u0631\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0627\u0632\u0647\u0627\u06cc \u0644\u062c\u0633\u062a\u06cc\u06a9\u06cc\r\n const today = new Date();\r\n for (let dayNum = 1; dayNum <= totalDaysInMonth; dayNum++) {\r\n const cell = document.createElement('div');\r\n cell.className = 'calendar-cell active-month';\r\n cell.textContent = dayNum;\r\n\r\n const thisDate = new Date(year, month, dayNum);\r\n \r\n \/\/ \u062a\u0637\u0628\u06cc\u0642 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0648 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633 \u0632\u0645\u0627\u0646\u06cc \u0644\u0648\u062c\u0633\u062a\u06cc\u06a9 \u0631\u0648\u0632 \u062c\u0627\u0631\u06cc\r\n const phaseClass = getLogisticsPhaseClass(thisDate);\r\n if (phaseClass) {\r\n cell.classList.add(phaseClass);\r\n }\r\n\r\n \/\/ \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0631\u0648\u0632 \u062d\u0642\u06cc\u0642\u06cc \u0627\u0645\u0631\u0648\u0632 \u0628\u0627 \u06a9\u0627\u062f\u0631 \u0622\u0628\u06cc \u062e\u0641\u06cc\u0641 \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u062a\u062f\u0627\u062e\u0644 \u0628\u0627 \u0631\u0646\u06af\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\r\n if (dayNum === today.getDate() && month === today.getMonth() && year === today.getFullYear() && !phaseClass) {\r\n cell.style.border = \"1px solid var(--accent-cyan)\";\r\n cell.style.color = \"var(--accent-cyan)\";\r\n }\r\n\r\n grid.appendChild(cell);\r\n }\r\n }\r\n\r\n \/\/ \u0622\u0645\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062a\u0646 \u0634\u06a9\u06cc\u0644 \u0648 \u0645\u0646\u0638\u0645 \u062c\u0647\u062a \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0645\u0648\u0642\u062a (Clipboard) \u062c\u0647\u062a \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\u06cc \u06cc\u0627 \u062a\u0644\u06af\u0631\u0627\u0645\u06cc\r\n function copyPlanSummary() {\r\n if (!calculationResults.finalEta) return;\r\n\r\n const format = (d) => d.toLocaleDateString('en-US', { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' });\r\n\r\n const textOutput = `--- TRADE LEAD TIME & DELIVERY ETA REPORT ---\r\nGenerated via Tendify.Net cargo planning widget\r\n\r\n1. Departure (ETD): ${format(calculationResults.etd)}\r\n2. Ocean Transit Voyage: ${calculationResults.transitDays} Days\r\n3. Port Arrival (ATA): ${format(calculationResults.portArrival)}\r\n4. Customs Clearance Processing: ${calculationResults.customsDays} Days (Weekends ${document.getElementById('exclude-weekends').checked ? 'Excluded' : 'Included'})\r\n5. Inland Carrier Dispatch: ${calculationResults.inlandDays} Days\r\n6. Safety Buffer Days Allocated: ${calculationResults.bufferDays} Days\r\n7. PROJECTED WAREHOUSE ETA: ${format(calculationResults.finalEta)}\r\n\r\nSUMMARY ANALYSIS:\r\n- Total Lead Time: ${calculationResults.totalCalendarDays} Days\r\n- Actual Working Days: ${calculationResults.workingDays} Days\r\n- Estimated Risk Index: ${calculationResults.riskPercent}% (${calculationResults.riskDesc})`;\r\n\r\n \/\/ \u0645\u06a9\u0627\u0646\u06cc\u0633\u0645 \u06a9\u067e\u06cc \u0627\u0645\u0646 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0635\u0641\u062d\u0627\u062a \u0627\u06cc \u0641\u0631\u06cc\u0645 \u0627\u0644\u0645\u0646\u062a\u0648\u0631 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0631\u0648\u062a\u06a9\u0644\u200c\u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\r\n const dummyEl = document.createElement('textarea');\r\n document.body.appendChild(dummyEl);\r\n dummyEl.value = textOutput;\r\n dummyEl.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(dummyEl);\r\n\r\n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0628\u0627\u06a9\u0633 \u067e\u0627\u067e\u200c\u0622\u067e \u0632\u06cc\u0628\u0627\r\n const toast = document.getElementById('toast');\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 3500);\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-8edcd1a e-flex e-con-boxed e-con e-parent\" data-id=\"8edcd1a\" 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-06a54f3 elementor-widget elementor-widget-spacer\" data-id=\"06a54f3\" 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-71de875 e-flex e-con-boxed e-con e-parent\" data-id=\"71de875\" 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-059b7b5 elementor-widget elementor-widget-html\" data-id=\"059b7b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tendify-seo-section\">\r\n <!-- \u0628\u062e\u0634 \u0645\u0639\u0631\u0641\u06cc \u0648 \u0647\u062f\u0631 \u0633\u0626\u0648 -->\r\n <div class=\"seo-intro-box\">\r\n <span class=\"seo-badge\">ENTERPRISE SUPPLY CHAIN LOGISTICS<\/span>\r\n <h2>Master Your Logistics Pipeline with the Ultimate ETA Planner<\/h2>\r\n <p>\r\n In the fast-paced world of international trade, supply chain visibility and precise scheduling are paramount. Delays at sea, customs bottlenecks, and unpredictable inland transportation can derail business operations and inflate costs[cite: 1]. To address these industry-wide challenges, <strong>Tendify.Net<\/strong> introduces the <strong>Trade Lead Time & ETA Planner<\/strong>\u2014a premium, enterprise-grade interactive tool engineered to map, predict, and optimize your global cargo milestones from departure to final destination[cite: 1].\r\n <\/p>\r\n <\/div>\r\n\r\n <hr class=\"seo-divider\">\r\n\r\n <!-- \u0628\u062e\u0634 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc -->\r\n <div class=\"seo-section-title\">\r\n <h3>How to Use the Trade Lead Time & ETA Planner<\/h3>\r\n <p>A simple, structured step-by-step process designed for frictionless navigation[cite: 1].<\/p>\r\n <\/div>\r\n\r\n <div class=\"seo-steps-grid\">\r\n <div class=\"seo-step-card\">\r\n <div class=\"step-num\">01<\/div>\r\n <h4>Select Shipping Channel<\/h4>\r\n <p>Accelerate your planning by choosing from pre-configured international shipping presets like Sea, Rail, or Air[cite: 1].<\/p>\r\n <\/div>\r\n <div class=\"seo-step-card\">\r\n <div class=\"step-num\">02<\/div>\r\n <h4>Establish ETD<\/h4>\r\n <p>Input the precise date your vessel or cargo carrier is scheduled to depart from the origin port to anchor your timeline[cite: 1].<\/p>\r\n <\/div>\r\n <div class=\"seo-step-card\">\r\n <div class=\"step-num\">03<\/div>\r\n <h4>Input Durations<\/h4>\r\n <p>Define your freight lifecycle by specifying individual timeframes for Ocean Transit, Customs Clearance, and Inland Legs[cite: 1].<\/p>\r\n <\/div>\r\n <div class=\"seo-step-card\">\r\n <div class=\"step-num\">04<\/div>\r\n <h4>Advanced Controls & Export<\/h4>\r\n <p>Toggle weekend exclusions, add safety buffers, monitor real-time risk index, and export to PDF reports[cite: 1].<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <hr class=\"seo-divider\">\r\n\r\n <!-- \u0628\u062e\u0634 \u062c\u062f\u0648\u0644 \u0644\u0648\u06a9\u0633 \u0645\u0632\u0627\u06cc\u0627 -->\r\n <div class=\"seo-section-title\">\r\n <h3>Strategic Advantages & Key Benefits<\/h3>\r\n <p>Why modern trade businesses leverage our cargo timeline optimizer[cite: 1].<\/p>\r\n <\/div>\r\n\r\n <div class=\"seo-table-container\">\r\n <table class=\"tendify-premium-table\">\r\n <thead>\r\n <tr>\r\n <th>Core Benefit[cite: 1]<\/th>\r\n <th>Strategic Advantage for Businesses[cite: 1]<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td class=\"highlight-td\">Operational Accuracy[cite: 1]<\/td>\r\n <td>By integrating weekend exclusions and customs-specific processing buffers, the planner eliminates surface-level estimations, delivering granular, reliable calendar arrival dates[cite: 1].<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"highlight-td\">Proactive Risk Management[cite: 1]<\/td>\r\n <td>The built-in algorithmic Risk Gauge analyzes your buffer configurations and logistical complexity to instantly assess delay risk levels, allowing you to establish crucial contingency plans[cite: 1].<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"highlight-td\">Multi-Stage Visibility[cite: 1]<\/td>\r\n <td>The dynamic, color-coded interactive calendar uniquely isolates each phase of transit (Sea Voyage, Customs, Inland), ensuring you know exactly where your investment stands at any given date[cite: 1].<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"highlight-td\">Freight Communication[cite: 1]<\/td>\r\n <td>One-click copy tools and automated, print-ready corporate styling turn raw logistics data into pristine, shareable executive updates or client-facing PDF documentation[cite: 1].<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <!-- \u0641\u0648\u062a\u0631 \u0633\u0626\u0648 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0644 \u062a\u0648 \u0627\u06a9\u0634\u0646 -->\r\n <div class=\"seo-footer-cta\">\r\n <p>Streamline your global distribution, secure accurate stock-flow tracking, and conquer international cargo unpredictability[cite: 1]. Leverage the power of the <strong>Trade Lead Time & ETA Planner<\/strong> at <strong>Tendify.Net<\/strong> and take command of your global logistics pipeline today[cite: 1].<\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0647\u0645\u0627\u0647\u0646\u06af \u0628\u0627 \u062a\u0645 \u062a\u06cc\u0631\u0647 Tendify \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062e\u0627\u0631\u062c\u06cc -->\r\n<style>\r\n .tendify-seo-section {\r\n background-color: #0f172a;\r\n border: 1px solid #334155;\r\n border-radius: 20px;\r\n padding: 35px;\r\n max-width: 1200px;\r\n margin: 30px auto;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n color: #f8fafc;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .seo-intro-box h2 {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: #fff;\r\n margin: 12px 0;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .seo-badge {\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n color: #00f2fe;\r\n background: rgba(0, 242, 254, 0.1);\r\n padding: 4px 12px;\r\n border-radius: 50px;\r\n display: inline-block;\r\n }\r\n\r\n .seo-intro-box p {\r\n color: #94a3b8;\r\n font-size: 0.95rem;\r\n line-height: 1.6;\r\n }\r\n\r\n .seo-divider {\r\n border: 0;\r\n height: 1px;\r\n background: #334155;\r\n margin: 30px 0;\r\n }\r\n\r\n .seo-section-title {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .seo-section-title h3 {\r\n font-size: 1.4rem;\r\n color: #fff;\r\n font-weight: 700;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .seo-section-title p {\r\n color: #94a3b8;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u06af\u0627\u0645\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 *\/\r\n .seo-steps-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .seo-step-card {\r\n background: rgba(30, 41, 59, 0.4);\r\n border: 1px solid #334155;\r\n border-radius: 12px;\r\n padding: 20px;\r\n position: relative;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .seo-step-card:hover {\r\n transform: translateY(-4px);\r\n border-color: #38bdf8;\r\n }\r\n\r\n .step-num {\r\n font-size: 2rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, #00f2fe 0%, #3b82f6 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n opacity: 0.3;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .seo-step-card h4 {\r\n font-size: 1rem;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n }\r\n\r\n .seo-step-card p {\r\n color: #94a3b8;\r\n font-size: 0.85rem;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062c\u062f\u0648\u0644 \u0644\u0648\u06a9\u0633 \u0648 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 *\/\r\n .seo-table-container {\r\n width: 100%;\r\n overflow-x: auto;\r\n border-radius: 12px;\r\n border: 1px solid #334155;\r\n }\r\n\r\n .tendify-premium-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n text-align: left;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .tendify-premium-table th {\r\n background-color: #1e293b;\r\n color: #38bdf8;\r\n padding: 14px 18px;\r\n font-weight: 700;\r\n border-bottom: 2px solid #334155;\r\n text-transform: uppercase;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .tendify-premium-table td {\r\n padding: 14px 18px;\r\n border-bottom: 1px solid #334155;\r\n color: #94a3b8;\r\n line-height: 1.5;\r\n vertical-align: middle;\r\n }\r\n\r\n .tendify-premium-table tbody tr:hover {\r\n background-color: rgba(255, 255, 255, 0.01);\r\n }\r\n\r\n .highlight-td {\r\n color: #fff !important;\r\n font-weight: 600;\r\n background-color: rgba(255, 255, 255, 0.01);\r\n width: 25%;\r\n }\r\n\r\n .seo-footer-cta {\r\n background: linear-gradient(135deg, rgba(0, 242, 254, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);\r\n border: 1px dashed #38bdf8;\r\n padding: 20px;\r\n border-radius: 12px;\r\n text-align: center;\r\n margin-top: 35px;\r\n }\r\n\r\n .seo-footer-cta p {\r\n font-size: 0.95rem;\r\n line-height: 1.6;\r\n color: #cbd5e1;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .tendify-seo-section { padding: 20px; }\r\n .highlight-td { width: 100%; display: block; padding-bottom: 5px; border-bottom: 0; }\r\n .tendify-premium-table td { display: block; width: 100%; }\r\n .tendify-premium-table th { display: none; }\r\n .tendify-premium-table tr { display: block; border-bottom: 1px solid #334155; padding: 10px 0; }\r\n }\r\n<\/style>\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>Use Tendify’s premium ETA Planner tool to calculate precise ocean cargo lead times. Exclude weekends, add safety buffers, and export instant timeline reports.<\/p>","protected":false},"author":15,"featured_media":18507,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[960],"class_list":["post-18503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools","tag-cargo"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18503","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=18503"}],"version-history":[{"count":4,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18503\/revisions"}],"predecessor-version":[{"id":18827,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18503\/revisions\/18827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18507"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}