Partner Information - Concrete Curing Equipment Supplier<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/d3js.org\/d3.v7.min.js\">\r\n <\/script>\r\n <script src=\"https:\/\/unpkg.com\/topojson@3\">\r\n <\/script>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n color: #e2e8f0;\r\n overflow-x: auto;\r\n min-height: 100vh;\r\n }\r\n\r\n .main-container {\r\n width: 1400px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n background: transparent;\r\n }\r\n\r\n .container {\r\n display: flex;\r\n min-height: 80vh;\r\n gap: 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .info-panel {\r\n width: 350px;\r\n background: rgba(30, 41, 59, 0.8);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n border-radius: 16px;\r\n padding: 30px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n display: flex;\r\n flex-direction: column;\r\n overflow-y: auto;\r\n z-index: 1;\r\n flex-shrink: 0;\r\n }\r\n\r\n .map-container {\r\n flex: 1;\r\n background: rgba(30, 41, 59, 0.8);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n position: relative;\r\n min-width: 800px;\r\n min-height: 600px;\r\n }\r\n\r\n h2 {\r\n color: #60a5fa;\r\n font-size: 20px;\r\n margin-bottom: 18px;\r\n border-bottom: 1px solid rgba(96, 165, 250, 0.2);\r\n padding-bottom: 10px;\r\n font-weight: 600;\r\n }\r\n\r\n .country-selector {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .country-selector label {\r\n display: block;\r\n margin-bottom: 10px;\r\n font-weight: 500;\r\n color: #cbd5e1;\r\n font-size: 16px;\r\n }\r\n\r\n select {\r\n width: 100%;\r\n padding: 14px;\r\n border: 1px solid rgba(148, 163, 184, 0.3);\r\n border-radius: 10px;\r\n font-size: 16px;\r\n background: rgba(15, 23, 42, 0.5);\r\n color: #f8fafc;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n appearance: none;\r\n background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'\/%3e%3c\/svg%3e\");\r\n background-position: right 12px center;\r\n background-repeat: no-repeat;\r\n background-size: 16px;\r\n padding-right: 40px;\r\n }\r\n\r\n select:focus {\r\n outline: none;\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n }\r\n\r\n select:hover {\r\n border-color: #93c5fd;\r\n }\r\n\r\n .partners-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n flex-grow: 1;\r\n }\r\n\r\n .partner-tab {\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 12px;\r\n border-left: 3px solid #60a5fa;\r\n border: 1px solid rgba(96, 165, 250, 0.2);\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .partner-header {\r\n padding: 15px 20px;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: transparent;\r\n border: none;\r\n width: 100%;\r\n text-align: left;\r\n color: #f8fafc;\r\n font-weight: 600;\r\n font-size: 16px;\r\n transition: background-color 0.3s ease;\r\n gap: 8px;\r\n }\r\n\r\n .partner-header:hover {\r\n background: rgba(96, 165, 250, 0.1);\r\n }\r\n\r\n .partner-header .arrow {\r\n transition: transform 0.3s ease;\r\n flex-shrink: 0;\r\n font-size: 12px;\r\n }\r\n\r\n .partner-content {\r\n padding: 0 20px;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.35s ease, padding 0.35s ease;\r\n }\r\n\r\n .partner-content.expanded {\r\n padding: 20px;\r\n max-height: 1200px;\r\n }\r\n\r\n .partner-name {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #f8fafc;\r\n margin-bottom: 12px;\r\n background: linear-gradient(135deg, #60a5fa, #38bdf8);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .partner-details p {\r\n margin: 8px 0;\r\n color: #cbd5e1;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n }\r\n\r\n .contact-link {\r\n display: inline-flex;\r\n align-items: center;\r\n background: linear-gradient(135deg, #60a5fa, #38bdf8);\r\n color: white;\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n text-decoration: none;\r\n margin-top: 20px;\r\n transition: all 0.3s ease;\r\n font-weight: 600;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);\r\n }\r\n\r\n .contact-link:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);\r\n background: linear-gradient(135deg, #3b82f6, #0ea5e9);\r\n }\r\n\r\n .contact-link i {\r\n margin-right: 8px;\r\n font-size: 16px;\r\n }\r\n\r\n .clickable-email,\r\n .clickable-phone,\r\n .clickable-website {\r\n color: #93c5fd;\r\n text-decoration: none;\r\n transition: all 0.2s ease;\r\n border-bottom: 1px dashed rgba(147, 197, 253, 0.5);\r\n word-break: break-all;\r\n }\r\n\r\n .clickable-email:hover,\r\n .clickable-phone:hover,\r\n .clickable-website:hover {\r\n color: #ffffff;\r\n border-bottom: 1px solid #93c5fd;\r\n }\r\n\r\n .product-item {\r\n background: rgba(96, 165, 250, 0.1);\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n margin-bottom: 10px;\r\n font-size: 15px;\r\n font-weight: 500;\r\n color: #93c5fd;\r\n border: 1px solid rgba(96, 165, 250, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .product-item:hover {\r\n background: rgba(96, 165, 250, 0.2);\r\n transform: translateX(5px);\r\n }\r\n\r\n .map-svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .country-path {\r\n fill: rgba(148, 163, 184, 0.6);\r\n stroke: rgba(255, 255, 255, 0.1);\r\n stroke-width: 0.3;\r\n transition: fill 0.3s ease;\r\n will-change: fill;\r\n }\r\n\r\n .country-path:hover {\r\n fill: #60a5fa;\r\n stroke: rgba(255, 255, 250, 0.3);\r\n cursor: pointer;\r\n }\r\n\r\n .partner-country {\r\n fill: rgba(96, 165, 250, 0.7);\r\n }\r\n\r\n .partner-country:hover {\r\n fill: #93c5fd;\r\n }\r\n\r\n .selected-country {\r\n fill: #3b82f6 !important;\r\n stroke: rgba(255, 255, 255, 0.4);\r\n stroke-width: 0.5;\r\n }\r\n\r\n .no-partner {\r\n color: #94a3b8;\r\n font-style: normal;\r\n font-weight: 400;\r\n }\r\n\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.3);\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: rgba(148, 163, 184, 0.5);\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: rgba(96, 165, 250, 0.8);\r\n }\r\n\r\n .map-controls {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .map-control-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(148, 163, 184, 0.3);\r\n background: rgba(15, 23, 42, 0.8);\r\n backdrop-filter: blur(10px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 18px;\r\n font-weight: bold;\r\n color: #f8fafc;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n user-select: none;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n .map-control-btn:hover {\r\n background: rgba(96, 165, 250, 0.2);\r\n border-color: #60a5fa;\r\n transform: scale(1.05);\r\n }\r\n\r\n .map-control-btn:active {\r\n transform: scale(0.95);\r\n transition: transform 0.1s ease;\r\n }\r\n\r\n .reset-btn {\r\n width: auto;\r\n padding: 10px 16px;\r\n border-radius: 8px;\r\n font-size: 14px;\r\n white-space: nowrap;\r\n }\r\n\r\n .marquee-container {\r\n display: inline-block;\r\n overflow: hidden;\r\n width: 100%;\r\n position: relative;\r\n max-width: 220px;\r\n vertical-align: middle;\r\n }\r\n\r\n .marquee-content {\r\n display: inline-block;\r\n white-space: nowrap;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .marquee-content.scrolling {\r\n animation: marquee-scroll 15s linear infinite;\r\n }\r\n\r\n @keyframes marquee-scroll {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-100%);\r\n }\r\n }\r\n\r\n .loading-message {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n color: #e2e8f0;\r\n font-size: 18px;\r\n z-index: 5;\r\n pointer-events: none;\r\n }\r\n\r\n .products-section h3 {\r\n color: #cbd5e1;\r\n font-size: 14px;\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n margin-top: 16px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* ========== \u79fb\u52a8\u7aef\u54cd\u5e94\u5f0f\u6837\u5f0f ========== *\/\r\n @media (max-width: 768px) {\r\n body {\r\n overflow-x: hidden;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n\r\n .main-container {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .container {\r\n flex-direction: column;\r\n min-height: auto;\r\n gap: 12px;\r\n margin-top: 8px;\r\n }\r\n\r\n \/* \u5730\u56fe\u5728\u4e0a\u65b9 *\/\r\n .map-container {\r\n order: 0;\r\n width: 100%;\r\n min-width: unset;\r\n min-height: 300px;\r\n height: clamp(300px, 45vh, 450px);\r\n max-height: 55vh;\r\n flex: none;\r\n border-radius: 12px;\r\n }\r\n\r\n \/* \u4fe1\u606f\u9762\u677f\u5728\u4e0b\u65b9 *\/\r\n .info-panel {\r\n order: 1;\r\n width: 100%;\r\n flex-shrink: 1;\r\n overflow-y: visible;\r\n max-height: none;\r\n padding: 20px 16px;\r\n border-radius: 12px;\r\n flex-grow: 0;\r\n }\r\n\r\n h2 {\r\n font-size: 18px;\r\n margin-bottom: 14px;\r\n padding-bottom: 8px;\r\n }\r\n\r\n .country-selector {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .country-selector label {\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n select {\r\n padding: 13px 36px 13px 14px;\r\n font-size: 16px;\r\n border-radius: 8px;\r\n background-position: right 10px center;\r\n background-size: 14px;\r\n }\r\n\r\n .partners-container {\r\n gap: 10px;\r\n }\r\n\r\n .partner-header {\r\n padding: 13px 14px;\r\n font-size: 15px;\r\n gap: 6px;\r\n }\r\n\r\n .partner-header .arrow {\r\n font-size: 10px;\r\n }\r\n\r\n .partner-content.expanded {\r\n padding: 14px;\r\n }\r\n\r\n .partner-name {\r\n font-size: 18px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .partner-details p {\r\n font-size: 13px;\r\n margin: 6px 0;\r\n line-height: 1.4;\r\n }\r\n\r\n .product-item {\r\n font-size: 13px;\r\n padding: 10px 12px;\r\n margin-bottom: 8px;\r\n border-radius: 6px;\r\n }\r\n\r\n .product-item:hover {\r\n transform: none;\r\n }\r\n\r\n .contact-link {\r\n padding: 11px 18px;\r\n font-size: 14px;\r\n margin-top: 14px;\r\n border-radius: 8px;\r\n width: 100%;\r\n justify-content: center;\r\n text-align: center;\r\n }\r\n\r\n .map-controls {\r\n top: 10px;\r\n right: 10px;\r\n gap: 8px;\r\n }\r\n\r\n .map-control-btn {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 10px;\r\n font-size: 20px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .reset-btn {\r\n width: auto;\r\n padding: 10px 14px;\r\n font-size: 13px;\r\n border-radius: 8px;\r\n }\r\n\r\n \/* \u79fb\u52a8\u7aef\u957f\u540d\u79f0\u4f7f\u7528\u7701\u7565\u53f7 *\/\r\n .marquee-container {\r\n max-width: 160px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n }\r\n\r\n .marquee-content.scrolling {\r\n animation-duration: 10s;\r\n }\r\n\r\n .loading-message {\r\n font-size: 15px;\r\n }\r\n\r\n .products-section h3 {\r\n font-size: 12px;\r\n margin-top: 12px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .no-partner {\r\n font-size: 14px;\r\n text-align: center;\r\n padding: 20px 0;\r\n }\r\n\r\n .clickable-email,\r\n .clickable-phone,\r\n .clickable-website {\r\n word-break: break-all;\r\n }\r\n }\r\n\r\n \/* ========== \u8d85\u5c0f\u5c4f\u5e55\u8fdb\u4e00\u6b65\u4f18\u5316 (\u2264480px) ========== *\/\r\n @media (max-width: 480px) {\r\n .main-container {\r\n padding: 6px;\r\n }\r\n\r\n .container {\r\n gap: 8px;\r\n margin-top: 4px;\r\n }\r\n\r\n .map-container {\r\n min-height: 260px;\r\n height: clamp(260px, 40vh, 380px);\r\n border-radius: 10px;\r\n }\r\n\r\n .info-panel {\r\n padding: 16px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n h2 {\r\n font-size: 16px;\r\n }\r\n\r\n .partner-header {\r\n padding: 11px 12px;\r\n font-size: 14px;\r\n }\r\n\r\n .partner-content.expanded {\r\n padding: 12px;\r\n }\r\n\r\n .partner-name {\r\n font-size: 16px;\r\n }\r\n\r\n .partner-details p {\r\n font-size: 12px;\r\n }\r\n\r\n .product-item {\r\n font-size: 12px;\r\n padding: 8px 10px;\r\n }\r\n\r\n .contact-link {\r\n padding: 10px 16px;\r\n font-size: 13px;\r\n }\r\n\r\n .map-control-btn {\r\n width: 38px;\r\n height: 38px;\r\n font-size: 18px;\r\n border-radius: 8px;\r\n }\r\n\r\n .map-controls {\r\n top: 8px;\r\n right: 8px;\r\n gap: 6px;\r\n }\r\n\r\n .reset-btn {\r\n padding: 8px 12px;\r\n font-size: 12px;\r\n }\r\n\r\n .marquee-container {\r\n max-width: 120px;\r\n }\r\n\r\n select {\r\n padding: 12px 32px 12px 12px;\r\n font-size: 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"main-container\">\r\n <div class=\"container\">\r\n <div class=\"info-panel\">\r\n <h2>Partner Information<\/h2>\r\n\r\n <div class=\"country-selector\">\r\n <label for=\"country-select\">Select Country\/Region:<\/label>\r\n <select id=\"country-select\">\r\n <option value=\"\">Select a Country<\/option>\r\n <option value=\"IND\">India<\/option>\r\n <option value=\"AUS\">Australia<\/option>\r\n <option value=\"KOR\">South Korea<\/option>\r\n <option value=\"PHL\">Philippines<\/option>\r\n <option value=\"RUS\">Russia<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div id=\"partners-container\" class=\"partners-container\">\r\n <p class=\"no-partner\">Select a country to view local partner information<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"map-container\">\r\n <div class=\"map-controls\">\r\n <button class=\"map-control-btn zoom-in-btn\" aria-label=\"Zoom In\">+<\/button>\r\n <button class=\"map-control-btn zoom-out-btn\" aria-label=\"Zoom Out\">\u2212<\/button>\r\n <button class=\"map-control-btn reset-btn\" aria-label=\"Reset View\">Reset<\/button>\r\n <\/div>\r\n <div id=\"loading-message\" class=\"loading-message\">Loading map...<\/div>\r\n <svg id=\"world-map\" class=\"map-svg\"><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ========== \u5408\u4f5c\u4f19\u4f34\u6570\u636e ==========\r\n const partnersData = {\r\n \"IND\": [{\r\n name: \"Apollo\",\r\n address: \"Village : Rajpur - 382 715.Dist. - Mehsana. Gujarat, India\",\r\n phone: \" +91 75676 11088\",\r\n email: \"info@apolloinfratech.com\",\r\n website: \"www.apolloinffratech.com\/\",\r\n products: [\"VG Vapor Generator\", \"CureComplete System\", \"CureControl System\"]\r\n }],\r\n \"AUS\": [{\r\n name: \"Nexsoft\",\r\n address: \"12 Envision Close Pakenham VIC 3810\",\r\n phone: \"+61 424 449 552\",\r\n email: \"marketing@nexsoftaustralia.com.au\",\r\n website: \"www.nexsoftaustralia.com.au\",\r\n products: [\"CureComplete System\", \"CureControl System\"]\r\n }],\r\n \"KOR\": [{\r\n name: \"Nordimpianti\",\r\n address: \"Nordimpianti Korea Corp. 189-16, Chungcheong-daero, Wonnam-myeon, Eumseong-gun, Chungcheongbuk-do, Republic of Korea\",\r\n phone: \"+82 10 9093 9253\",\r\n email: \"minkyukim@nordimpianti.com \",\r\n website: \"www.nordimpianti-korea.co.kr\/\",\r\n products: [\"VG Vapor Generator\", \"CureComplete System\"]\r\n }],\r\n \"PHL\": [{\r\n name: \"Bueven\",\r\n address: \"Unit 2C Linear Bldg. 142 Katipunan Avenue,Brgy. St. Ignatius Quezon City\",\r\n phone: \"(02) 8 715 0756 \",\r\n email: \"info@bueven.com\",\r\n website: \"www.bueven.com\",\r\n products: [\"CureControl System\", \"VG Vapor Generator\"]\r\n }],\r\n \"RUS\": [{\r\n name: \"Betonmash\",\r\n address: \"129226, \u0433. \u041c\u043e\u0441\u043a\u0432\u0430, \u0421\u0435\u043b\u044c\u0441\u043a\u043e\u0445\u043e\u0437\u044f\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0443\u043b., \u0434. 17, \u043a\u043e\u0440\u043f. 1\",\r\n phone: \"+7 4957965410\",\r\n email: \"office@betonmash.ru\",\r\n website: \"betonmash.ru\",\r\n products: [\"CureComplete System\", \"CureControl System\", \"VG Vapor Generator\"]\r\n }]\r\n };\r\n\r\n \/\/ ========== \u5168\u5c40\u53d8\u91cf ==========\r\n let zoom, svg, g, path, projection;\r\n let selectedCountry = null;\r\n let currentWorldData = null;\r\n\r\n \/\/ ========== \u5730\u56fe\u521d\u59cb\u5316 ==========\r\n function initMap() {\r\n const mapContainer = document.querySelector('.map-container');\r\n const width = mapContainer.clientWidth;\r\n const height = mapContainer.clientHeight;\r\n\r\n if (width <= 0 || height <= 0) {\r\n \/\/ \u5bb9\u5668\u5c3a\u5bf8\u5c1a\u672a\u786e\u5b9a\uff0c\u5ef6\u8fdf\u521d\u59cb\u5316\r\n setTimeout(initMap, 150);\r\n return;\r\n }\r\n\r\n \/\/ \u6839\u636e\u5c4f\u5e55\u5bbd\u5ea6\u8c03\u6574\u521d\u59cb\u7f29\u653e\u7ea7\u522b\r\n const isMobile = width < 768;\r\n const isSmallMobile = width <= 480;\r\n const mapScale = isSmallMobile ? 80 : (isMobile ? 95 : 130);\r\n\r\n projection = d3.geoMercator()\r\n .scale(mapScale)\r\n .translate([width \/ 2, height \/ 1.5]);\r\n\r\n path = d3.geoPath().projection(projection);\r\n\r\n svg = d3.select(\"#world-map\")\r\n .attr(\"width\", width)\r\n .attr(\"height\", height);\r\n\r\n \/\/ \u6e05\u9664\u65e7\u5185\u5bb9\r\n svg.selectAll(\"*\").remove();\r\n\r\n g = svg.append(\"g\");\r\n\r\n zoom = d3.zoom()\r\n .scaleExtent([0.5, 8])\r\n .wheelDelta(() => 0) \/\/ \u7981\u7528\u6eda\u8f6e\u7f29\u653e\uff0c\u4fdd\u7559\u6309\u94ae\u7f29\u653e\u548c\u89e6\u6478\u7f29\u653e\r\n .on(\"zoom\", (event) => {\r\n g.attr(\"transform\", event.transform);\r\n });\r\n\r\n svg.call(zoom);\r\n\r\n \/\/ \u5982\u679c\u5df2\u6709\u6570\u636e\u5219\u76f4\u63a5\u6e32\u67d3\r\n if (currentWorldData) {\r\n renderMap(currentWorldData);\r\n } else {\r\n fetchWorldMapData();\r\n }\r\n }\r\n\r\n function fetchWorldMapData() {\r\n const sources = [\r\n \"https:\/\/cdn.jsdelivr.net\/npm\/world-atlas@2\/countries-110m.json\",\r\n \"https:\/\/raw.githubusercontent.com\/holtzy\/D3-graph-gallery\/master\/DATA\/world.geojson\"\r\n ];\r\n\r\n let currentIndex = 0;\r\n\r\n function tryNextSource() {\r\n if (currentIndex >= sources.length) {\r\n document.getElementById('loading-message').textContent =\r\n \"Failed to load map data. Please refresh.\";\r\n return;\r\n }\r\n const source = sources[currentIndex];\r\n currentIndex++;\r\n d3.json(source).then((data) => {\r\n currentWorldData = data;\r\n renderMap(data);\r\n }).catch(tryNextSource);\r\n }\r\n\r\n tryNextSource();\r\n }\r\n\r\n \/\/ ========== \u6838\u5fc3\u6e32\u67d3\u51fd\u6570 ==========\r\n function renderMap(world) {\r\n document.getElementById('loading-message').style.display = 'none';\r\n\r\n let countries;\r\n if (world.objects && world.objects.countries) {\r\n countries = topojson.feature(world, world.objects.countries).features;\r\n } else if (world.features) {\r\n countries = world.features;\r\n } else {\r\n console.error(\"Unknown world data format\");\r\n return;\r\n }\r\n\r\n \/\/ \u8fc7\u6ee4\u6389\u53f0\u6e7e\uff08\u663e\u793a\u4e3a\u4e2d\u56fd\u7684\u4e00\u90e8\u5206\uff09\r\n countries = countries.filter(d => {\r\n const code = getCountryISO(d.id);\r\n return code !== 'TWN';\r\n });\r\n\r\n \/\/ \u4f7f\u7528 data join \u521b\u5efa\/\u66f4\u65b0\u8def\u5f84\r\n const pathsUpdate = g.selectAll(\"path\")\r\n .data(countries, d => d.id);\r\n\r\n pathsUpdate.exit().remove();\r\n\r\n const paths = pathsUpdate.enter()\r\n .append(\"path\")\r\n .merge(pathsUpdate);\r\n\r\n paths\r\n .attr(\"d\", path)\r\n .attr(\"class\", d => {\r\n const code = getCountryISO(d.id);\r\n return code && partnersData[code] ? \"country-path partner-country\" : \"country-path\";\r\n })\r\n .attr(\"data-country-code\", d => getCountryISO(d.id))\r\n .style(\"fill\", d => {\r\n const code = getCountryISO(d.id);\r\n if (code === selectedCountry) return \"#3b82f6\";\r\n return code && partnersData[code] ? \"rgba(96, 165, 250, 0.7)\" :\r\n \"rgba(148, 163, 184, 0.6)\";\r\n })\r\n .on(\"click\", function(event, d) {\r\n const code = getCountryISO(d.id);\r\n if (code && partnersData[code]) {\r\n updatePartnersInfo(code);\r\n highlightCountry(code);\r\n }\r\n })\r\n .on(\"mouseover\", function(event, d) {\r\n const code = getCountryISO(d.id);\r\n if (code && partnersData[code] && selectedCountry !== code) {\r\n d3.select(this).style(\"fill\", \"#93c5fd\");\r\n }\r\n })\r\n .on(\"mouseout\", function(event, d) {\r\n const code = getCountryISO(d.id);\r\n if (code === selectedCountry) {\r\n d3.select(this).style(\"fill\", \"#3b82f6\");\r\n } else if (code && partnersData[code]) {\r\n d3.select(this).style(\"fill\", \"rgba(96, 165, 250, 0.7)\");\r\n } else {\r\n d3.select(this).style(\"fill\", \"rgba(148, 163, 184, 0.6)\");\r\n }\r\n });\r\n\r\n \/\/ \u9ed8\u8ba4\u9009\u4e2d\u7b2c\u4e00\u4e2a\u5408\u4f5c\u4f19\u4f34\u56fd\u5bb6\r\n const firstCode = Object.keys(partnersData)[0];\r\n if (firstCode && !selectedCountry) {\r\n updatePartnersInfo(firstCode);\r\n highlightCountry(firstCode);\r\n } else if (selectedCountry) {\r\n \/\/ \u6062\u590d\u4e4b\u524d\u7684\u9ad8\u4eae\r\n highlightCountry(selectedCountry);\r\n }\r\n }\r\n\r\n \/\/ ========== \u9ad8\u4eae\u56fd\u5bb6 ==========\r\n function highlightCountry(code) {\r\n selectedCountry = code;\r\n g.selectAll(\"path\").style(\"fill\", function(d) {\r\n const c = getCountryISO(d.id);\r\n if (c === code) return \"#3b82f6\";\r\n if (c && partnersData[c]) return \"rgba(96, 165, 250, 0.7)\";\r\n return \"rgba(148, 163, 184, 0.6)\";\r\n });\r\n }\r\n\r\n \/\/ ========== \u66f4\u65b0\u5408\u4f5c\u4f19\u4f34\u4fe1\u606f\u9762\u677f ==========\r\n function updatePartnersInfo(countryCode) {\r\n const partners = partnersData[countryCode];\r\n const container = document.getElementById('partners-container');\r\n\r\n if (!partners || partners.length === 0) {\r\n container.innerHTML = '<p class=\"no-partner\">No partners available for this region<\/p>';\r\n return;\r\n }\r\n\r\n container.innerHTML = '';\r\n\r\n partners.forEach((partner, index) => {\r\n const partnerTab = document.createElement('div');\r\n partnerTab.className = 'partner-tab';\r\n\r\n \/\/ \u68c0\u6d4b\u662f\u5426\u9700\u8981\u6eda\u52a8\u957f\u540d\u79f0\r\n const tempDiv = document.createElement('div');\r\n tempDiv.style.position = 'absolute';\r\n tempDiv.style.visibility = 'hidden';\r\n tempDiv.style.whiteSpace = 'nowrap';\r\n tempDiv.style.font = '600 15px \"Inter\", sans-serif';\r\n tempDiv.textContent = partner.name;\r\n document.body.appendChild(tempDiv);\r\n const nameWidth = tempDiv.offsetWidth;\r\n document.body.removeChild(tempDiv);\r\n\r\n \/\/ \u79fb\u52a8\u7aef\u9608\u503c\u66f4\u5c0f\r\n const isMobile = window.innerWidth <= 768;\r\n const threshold = isMobile ? 160 : 250;\r\n const needsMarquee = nameWidth > threshold;\r\n\r\n let companyNameElement;\r\n if (needsMarquee) {\r\n companyNameElement =\r\n `<div class=\"marquee-container\"><div class=\"marquee-content\">${partner.name}<\/div><\/div>`;\r\n } else {\r\n companyNameElement = `<span>${partner.name}<\/span>`;\r\n }\r\n\r\n partnerTab.innerHTML = `\r\n <button class=\"partner-header\">\r\n <div style=\"width: 100%; min-width: 0;\">${companyNameElement}<\/div>\r\n <span class=\"arrow\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"partner-content\" id=\"content-${index}\">\r\n <div class=\"partner-name\">${partner.name}<\/div>\r\n <div class=\"partner-details\">\r\n <p><strong>\ud83d\udccd Address:<\/strong> <a href=\"https:\/\/maps.google.com\/?q=${encodeURIComponent(partner.address)}\" target=\"_blank\" class=\"clickable-website\">${partner.address}<\/a><\/p>\r\n <p><strong>\ud83d\udcde Phone:<\/strong> <a href=\"tel:${partner.phone.replace(\/\\s+\/g, '')}\" class=\"clickable-phone\">${partner.phone}<\/a><\/p>\r\n <p><strong>\u2709\ufe0f Email:<\/strong> <a href=\"mailto:${partner.email.trim()}\" class=\"clickable-email\">${partner.email.trim()}<\/a><\/p>\r\n <p><strong>\ud83c\udf10 Website:<\/strong> <a href=\"http:\/\/${partner.website}\" target=\"_blank\" class=\"clickable-website\">${partner.website}<\/a><\/p>\r\n <\/div>\r\n <div class=\"products-section\">\r\n <h3>Available Products:<\/h3>\r\n ${partner.products.map(product => `<div class=\"product-item\">\u2022 ${product}<\/div>`).join('')}\r\n <\/div>\r\n <a href=\"mailto:${partner.email.trim()}\" class=\"contact-link\"><i>\ud83d\udce7<\/i> Get In Touch<\/a>\r\n <\/div>\r\n `;\r\n\r\n container.appendChild(partnerTab);\r\n\r\n const header = partnerTab.querySelector('.partner-header');\r\n const content = partnerTab.querySelector('.partner-content');\r\n const arrow = header.querySelector('.arrow');\r\n\r\n header.addEventListener('click', () => {\r\n const isCurrentlyExpanded = content.classList.contains('expanded');\r\n\r\n \/\/ \u5173\u95ed\u6240\u6709\u5176\u4ed6\u5c55\u5f00\u7684content\r\n document.querySelectorAll('.partner-tab .partner-content').forEach(c => {\r\n if (c !== content) {\r\n c.classList.remove('expanded');\r\n const otherArrow = c.previousElementSibling?.querySelector(\r\n '.arrow');\r\n if (otherArrow) otherArrow.style.transform = 'rotate(0deg)';\r\n }\r\n });\r\n\r\n \/\/ \u5207\u6362\u5f53\u524dcontent\r\n if (isCurrentlyExpanded) {\r\n content.classList.remove('expanded');\r\n arrow.style.transform = 'rotate(0deg)';\r\n } else {\r\n content.classList.add('expanded');\r\n arrow.style.transform = 'rotate(180deg)';\r\n }\r\n });\r\n\r\n \/\/ \u5904\u7406\u957f\u540d\u79f0\u7684\u6eda\u52a8\u6548\u679c\r\n if (needsMarquee) {\r\n const marqueeContent = partnerTab.querySelector('.marquee-content');\r\n header.addEventListener('mouseenter', () => {\r\n marqueeContent.classList.add('scrolling');\r\n });\r\n header.addEventListener('mouseleave', () => {\r\n marqueeContent.classList.remove('scrolling');\r\n });\r\n \/\/ \u79fb\u52a8\u7aef\u89e6\u6478\u65f6\u4e5f\u89e6\u53d1\u6eda\u52a8\r\n header.addEventListener('touchstart', () => {\r\n marqueeContent.classList.add('scrolling');\r\n }, { passive: true });\r\n header.addEventListener('touchend', () => {\r\n setTimeout(() => {\r\n marqueeContent.classList.remove('scrolling');\r\n }, 2000);\r\n });\r\n }\r\n\r\n \/\/ \u81ea\u52a8\u5c55\u5f00\u7b2c\u4e00\u4e2a\u5408\u4f5c\u4f19\u4f34\r\n if (index === 0) {\r\n content.classList.add('expanded');\r\n arrow.style.transform = 'rotate(180deg)';\r\n }\r\n });\r\n\r\n \/\/ \u540c\u6b65\u4e0b\u62c9\u83dc\u5355\r\n document.getElementById('country-select').value = countryCode;\r\n }\r\n\r\n \/\/ ========== \u83b7\u53d6\u56fd\u5bb6 ISO \u4ee3\u7801 ==========\r\n function getCountryISO(id) {\r\n if (typeof id === 'number') {\r\n const isoMap = {\r\n 840: \"USA\",\r\n 124: \"CAN\",\r\n 826: \"GBR\",\r\n 276: \"DE\",\r\n 250: \"FRA\",\r\n 392: \"JPN\",\r\n 36: \"AUS\",\r\n 702: \"SGP\",\r\n 710: \"ZAF\",\r\n 76: \"BRA\",\r\n 356: \"IND\",\r\n 156: \"CN\",\r\n 158: \"TWN\",\r\n 410: \"KOR\",\r\n 608: \"PHL\",\r\n 643: \"RUS\"\r\n };\r\n if (isoMap[id] === \"TWN\") return \"CN\";\r\n return isoMap[id] || null;\r\n } else {\r\n const code = id.toString().toUpperCase();\r\n if (code === 'TWN') return 'CN';\r\n return code;\r\n }\r\n }\r\n\r\n \/\/ ========== \u4e8b\u4ef6\u76d1\u542c\u4e0e\u63a7\u4ef6 ==========\r\n document.getElementById('country-select').addEventListener('change', function() {\r\n if (this.value && partnersData[this.value]) {\r\n updatePartnersInfo(this.value);\r\n highlightCountry(this.value);\r\n } else {\r\n document.getElementById('partners-container').innerHTML =\r\n '<p class=\"no-partner\">Select a country to view local partner information<\/p>';\r\n highlightCountry(null);\r\n selectedCountry = null;\r\n \/\/ \u6062\u590d\u6240\u6709\u56fd\u5bb6\u9ed8\u8ba4\u989c\u8272\r\n if (g) {\r\n g.selectAll(\"path\").style(\"fill\", function(d) {\r\n const c = getCountryISO(d.id);\r\n if (c && partnersData[c]) return \"rgba(96, 165, 250, 0.7)\";\r\n return \"rgba(148, 163, 184, 0.6)\";\r\n });\r\n }\r\n }\r\n });\r\n\r\n document.querySelector('.zoom-in-btn').addEventListener('click', () => {\r\n if (svg) svg.transition().duration(300).call(zoom.scaleBy, 1.3);\r\n });\r\n document.querySelector('.zoom-out-btn').addEventListener('click', () => {\r\n if (svg) svg.transition().duration(300).call(zoom.scaleBy, 0.7);\r\n });\r\n document.querySelector('.reset-btn').addEventListener('click', () => {\r\n if (svg) svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity);\r\n });\r\n\r\n \/\/ \u521d\u59cb\u5316\r\n window.addEventListener('load', initMap);\r\n\r\n \/\/ \u7a97\u53e3\u5927\u5c0f\u53d8\u5316\u65f6\u91cd\u5efa\u5730\u56fe\r\n let resizeTimeout;\r\n window.addEventListener('resize', () => {\r\n clearTimeout(resizeTimeout);\r\n resizeTimeout = setTimeout(() => {\r\n if (svg) {\r\n svg.selectAll(\"*\").remove();\r\n g = svg.append(\"g\");\r\n }\r\n initMap();\r\n }, 300);\r\n });\r\n\r\n \/\/ \u5904\u7406\u79fb\u52a8\u7aef\u5c4f\u5e55\u65cb\u8f6c\r\n window.addEventListener('orientationchange', () => {\r\n setTimeout(() => {\r\n if (svg) {\r\n svg.selectAll(\"*\").remove();\r\n g = svg.append(\"g\");\r\n }\r\n initMap();\r\n }, 400);\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=\"elementor-element elementor-element-7c1d92f e-flex e-con-boxed e-con e-parent\" data-id=\"7c1d92f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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>Innovating Together, Expanding Markets Global TechnologyLocal Partners We work closely with trusted partners worldwide to integrate advanced steam systems into diverse industrial applications. Through technical synergy and shared resources, we jointly deliver high – performance, highly reliable solutions to our customers. Partner Information – Concrete Curing Equipment Supplier Partner Information Select Country\/Region: Select a CountryIndiaAustraliaSouth […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2410","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/pages\/2410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/comments?post=2410"}],"version-history":[{"count":148,"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/pages\/2410\/revisions"}],"predecessor-version":[{"id":3942,"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/pages\/2410\/revisions\/3942"}],"wp:attachment":[{"href":"https:\/\/myhostingforword-19vfdjmb8f.live-website.com\/zh\/wp-json\/wp\/v2\/media?parent=2410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}