Curetec Global Distribution - Partner Map<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/topojson@3\"><\/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, sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #0a0f1c 0%, #111827 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 max-width: 1600px;\r\n width: calc(100% - 40px);\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: 24px;\r\n margin-top: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .info-panel {\r\n width: 380px;\r\n background: rgba(15, 25, 45, 0.85);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(100, 150, 250, 0.25);\r\n border-radius: 24px;\r\n padding: 28px 24px;\r\n box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.4);\r\n display: flex;\r\n flex-direction: column;\r\n overflow-y: auto;\r\n z-index: 2;\r\n flex-shrink: 0;\r\n }\r\n\r\n .map-container {\r\n flex: 1;\r\n background: rgba(5, 10, 25, 0.6);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(100, 150, 250, 0.3);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);\r\n position: relative;\r\n min-width: 500px;\r\n min-height: 550px;\r\n }\r\n\r\n .inline-legend {\r\n position: absolute;\r\n bottom: 16px;\r\n right: 16px;\r\n background: rgba(0, 0, 0, 0.65);\r\n backdrop-filter: blur(8px);\r\n border-radius: 12px;\r\n padding: 8px 14px;\r\n display: flex;\r\n gap: 16px;\r\n z-index: 15;\r\n font-size: 12px;\r\n font-weight: 500;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n pointer-events: none;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.3);\r\n }\r\n .legend-dot {\r\n display: inline-block;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 4px;\r\n margin-right: 6px;\r\n vertical-align: middle;\r\n }\r\n .legend-item {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n color: #eef4ff;\r\n }\r\n .dot-gray { background: #7a8eae; box-shadow: 0 0 2px #7a8eae; }\r\n .dot-blue { background: #3b82f6; box-shadow: 0 0 2px #3b82f6; }\r\n\r\n h2 {\r\n color: #90b4ff;\r\n font-size: 22px;\r\n margin-bottom: 20px;\r\n border-bottom: 1px solid rgba(80, 120, 200, 0.4);\r\n padding-bottom: 12px;\r\n font-weight: 700;\r\n letter-spacing: -0.3px;\r\n }\r\n\r\n .country-selector {\r\n margin-bottom: 24px;\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: #cbd5e6;\r\n font-size: 14px;\r\n }\r\n\r\n select {\r\n width: 100%;\r\n padding: 14px;\r\n border: 1px solid rgba(80, 120, 200, 0.5);\r\n border-radius: 14px;\r\n font-size: 15px;\r\n background: rgba(0, 0, 0, 0.5);\r\n color: #f1f5f9;\r\n cursor: pointer;\r\n transition: all 0.2s 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='%2380a0ff' 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 14px center;\r\n background-repeat: no-repeat;\r\n background-size: 16px;\r\n }\r\n\r\n select:focus {\r\n outline: none;\r\n border-color: #5b8cff;\r\n box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.2);\r\n }\r\n\r\n .partners-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n flex-grow: 1;\r\n }\r\n\r\n .partner-tab {\r\n background: rgba(10, 20, 35, 0.7);\r\n border-radius: 18px;\r\n border: 1px solid rgba(80, 130, 240, 0.3);\r\n overflow: hidden;\r\n transition: all 0.2s;\r\n }\r\n\r\n .partner-header {\r\n padding: 16px 18px;\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 width: 100%;\r\n text-align: left;\r\n color: #f0f4ff;\r\n font-weight: 600;\r\n font-size: 16px;\r\n transition: all 0.2s;\r\n gap: 10px;\r\n }\r\n\r\n .partner-header:hover { background: rgba(70, 130, 255, 0.15); }\r\n .partner-header .arrow {\r\n transition: transform 0.25s ease;\r\n flex-shrink: 0;\r\n font-size: 12px;\r\n opacity: 0.8;\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.3s ease;\r\n }\r\n\r\n .partner-content.expanded {\r\n padding: 20px;\r\n max-height: 1300px;\r\n }\r\n\r\n .partner-name {\r\n font-size: 22px;\r\n font-weight: 800;\r\n margin-bottom: 12px;\r\n background: linear-gradient(120deg, #60a5fa, #3b82f6);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .partner-details p {\r\n margin: 10px 0;\r\n color: #ccddf8;\r\n font-weight: 400;\r\n line-height: 1.45;\r\n font-size: 14px;\r\n }\r\n\r\n \/* \u901a\u7528\u6309\u94ae\u6837\u5f0f (\u7528\u4e8e\u5408\u4f5c\u4f19\u4f34\u8054\u7cfb\u6309\u94ae\u53ca\u5168\u5c40\u8054\u7cfb\u6211\u4eec\u6309\u94ae) *\/\r\n .contact-link, .global-contact-link {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(95deg, #3b82f6, #1e40af);\r\n color: white;\r\n padding: 12px 24px;\r\n border-radius: 40px;\r\n text-decoration: none;\r\n margin-top: 20px;\r\n transition: all 0.25s;\r\n font-weight: 600;\r\n font-size: 14px;\r\n box-shadow: 0 5px 12px rgba(59,130,246,0.3);\r\n border: none;\r\n cursor: pointer;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n\r\n .contact-link:hover, .global-contact-link:hover {\r\n transform: translateY(-2px);\r\n background: linear-gradient(95deg, #60a5fa, #2563eb);\r\n box-shadow: 0 8px 20px rgba(59,130,246,0.4);\r\n }\r\n\r\n .clickable-email, .clickable-phone, .clickable-website {\r\n color: #a0c4ff;\r\n text-decoration: none;\r\n border-bottom: 1px dashed rgba(59,130,246,0.4);\r\n transition: all 0.2s;\r\n }\r\n .clickable-email:hover, .clickable-phone:hover, .clickable-website:hover {\r\n color: #ffffff;\r\n border-bottom-color: #60a5fa;\r\n }\r\n\r\n .product-item {\r\n background: rgba(59, 130, 246, 0.15);\r\n padding: 10px 14px;\r\n border-radius: 12px;\r\n margin-bottom: 8px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: #bfdbff;\r\n border-left: 3px solid #3b82f6;\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 stroke: rgba(20, 30, 55, 0.7);\r\n stroke-width: 0.6;\r\n transition: fill 0.2s, stroke 0.2s, filter 0.1s;\r\n cursor: pointer;\r\n }\r\n\r\n .map-controls {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 12;\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: 44px;\r\n height: 44px;\r\n border-radius: 14px;\r\n border: 1px solid rgba(100, 150, 250, 0.6);\r\n background: rgba(10, 20, 40, 0.9);\r\n backdrop-filter: blur(8px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 22px;\r\n font-weight: bold;\r\n color: #eef4ff;\r\n transition: all 0.2s;\r\n box-shadow: 0 3px 10px rgba(0,0,0,0.3);\r\n }\r\n\r\n .map-control-btn:hover {\r\n background: #2b5fcf;\r\n border-color: #90b4ff;\r\n transform: scale(1.02);\r\n }\r\n\r\n .reset-btn {\r\n width: auto;\r\n padding: 0 18px;\r\n font-size: 13px;\r\n font-weight: 600;\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 background: rgba(0,0,0,0.6);\r\n padding: 12px 24px;\r\n border-radius: 30px;\r\n font-size: 15px;\r\n z-index: 10;\r\n pointer-events: none;\r\n color: #bbd7ff;\r\n }\r\n\r\n .marquee-container {\r\n display: inline-block;\r\n overflow: hidden;\r\n width: 100%;\r\n max-width: 210px;\r\n vertical-align: middle;\r\n }\r\n .marquee-content {\r\n display: inline-block;\r\n white-space: nowrap;\r\n transition: transform 0.2s;\r\n }\r\n .marquee-content.scrolling {\r\n animation: marquee-scroll 12s linear infinite;\r\n }\r\n @keyframes marquee-scroll {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-100%); }\r\n }\r\n\r\n .flat-pin {\r\n cursor: pointer;\r\n transition: filter 0.2s ease;\r\n }\r\n .flat-pin:hover {\r\n filter: drop-shadow(0 0 4px #EF4444);\r\n }\r\n .flat-pin .pin-circle {\r\n fill: #EF4444;\r\n transition: fill 0.2s;\r\n }\r\n .flat-pin:hover .pin-circle {\r\n fill: #F87171;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .info-panel { width: 320px; }\r\n .map-container { min-width: 400px; }\r\n }\r\n @media (max-width: 768px) {\r\n .main-container { width: 100%; padding: 12px; }\r\n .container { flex-direction: column; gap: 14px; }\r\n .info-panel { width: 100%; order: 1; padding: 20px; }\r\n .map-container { order: 0; min-width: auto; min-height: 320px; height: 42vh; }\r\n .inline-legend { bottom: 8px; right: 8px; padding: 6px 12px; gap: 12px; font-size: 10px; }\r\n .legend-dot { width: 12px; height: 12px; }\r\n }\r\n @media (max-width: 480px) {\r\n .info-panel { padding: 16px; }\r\n .map-container { min-height: 280px; }\r\n .inline-legend { bottom: 6px; right: 6px; padding: 4px 10px; }\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\" id=\"partner-panel-root\"><\/div>\r\n <div class=\"map-container\" id=\"map-root\">\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\">\u27f3 Reset<\/button>\r\n <\/div>\r\n <div id=\"loading-message\" class=\"loading-message\">\ud83d\uddfa\ufe0f Loading map...<\/div>\r\n <svg id=\"world-map\" class=\"map-svg\"><\/svg>\r\n <div class=\"inline-legend\">\r\n <div class=\"legend-item\"><span class=\"legend-dot dot-gray\"><\/span> Curetec Energietechnik GmbH<\/div>\r\n <div class=\"legend-item\"><span class=\"legend-dot dot-blue\"><\/span> Curetec Shanghai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script type=\"module\">\r\n \/\/ ======================= \u5408\u4f5c\u4f19\u4f34\u6570\u636e =======================\r\n const nexsoftPartner = {\r\n name: \"Nexsoft Australia & New Zealand\",\r\n address: \"12 Envision Close Pakenham VIC 3810, Australia \/ Serving New Zealand region\",\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 \r\n const partnersData = {\r\n \"IND\": [{ name: \"Apollo Infratech\", address: \"Village : Rajpur - 382 715, Dist. Mehsana, Gujarat, India\", phone: \"+91 75676 11088\", email: \"info@apolloinfratech.com\", website: \"www.apolloinfratech.com\", products: [\"VG Vapor Generator\", \"CureComplete System\", \"CureControl System\"] }],\r\n \"AUS\": [nexsoftPartner],\r\n \"NZL\": [nexsoftPartner],\r\n \"KOR\": [{ name: \"Nordimpianti Korea Corp.\", address: \"189-16, Chungcheong-daero, Wonnam-myeon, Eumseong-gun, Chungcheongbuk-do, Republic of Korea\", phone: \"+82 10 9093 9253\", email: \"minkyukim@nordimpianti.com\", website: \"www.nordimpianti-korea.co.kr\", products: [\"VG Vapor Generator\", \"CureComplete System\"] }],\r\n \"PHL\": [{ name: \"Bueven Inc.\", address: \"Unit 2C Linear Bldg. 142 Katipunan Avenue, Brgy. St. Ignatius Quezon City, Philippines\", phone: \"(02) 8 715 0756\", email: \"info@bueven.com\", website: \"www.bueven.com\", products: [\"CureControl System\", \"VG Vapor Generator\"] }],\r\n \"RUS\": [{ name: \"Betonmash\", 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, Russia\", phone: \"+7 4957965410\", email: \"office@betonmash.ru\", website: \"betonmash.ru\", products: [\"CureComplete System\", \"CureControl System\", \"VG Vapor Generator\"] }]\r\n };\r\n\r\n \/\/ ======================= \u533a\u57df\u5212\u5206\u4e0e\u5de5\u5177\u51fd\u6570 =======================\r\n const americasSet = new Set([\"USA\",\"CAN\",\"MEX\",\"GTM\",\"BLZ\",\"HND\",\"SLV\",\"NIC\",\"CRI\",\"PAN\",\"BHS\",\"CUB\",\"JAM\",\"HTI\",\"DOM\",\"PRI\",\"VCT\",\"LCA\",\"GRD\",\"BRB\",\"TTO\",\"ABW\",\"CUW\",\"SXM\",\"KNA\",\"DMA\",\"COL\",\"VEN\",\"GUY\",\"SUR\",\"GUF\",\"ECU\",\"PER\",\"BRA\",\"BOL\",\"PRY\",\"CHL\",\"ARG\",\"URY\",\"FLK\"]);\r\n const europeExclRussiaSet = new Set([\"GBR\",\"FRA\",\"DEU\",\"ITA\",\"ESP\",\"PRT\",\"NLD\",\"BEL\",\"LUX\",\"IRL\",\"DNK\",\"SWE\",\"NOR\",\"FIN\",\"ISL\",\"AUT\",\"CHE\",\"CZE\",\"SVK\",\"HUN\",\"POL\",\"ROU\",\"BGR\",\"SRB\",\"HRV\",\"SVN\",\"BIH\",\"MNE\",\"ALB\",\"MKD\",\"GRC\",\"EST\",\"LVA\",\"LTU\",\"UKR\",\"BLR\",\"MDA\",\"AND\",\"MCO\",\"LIE\",\"SMR\",\"VAT\",\"MLT\",\"CYP\"]);\r\n \r\n function getRegionGroup(isoCode) {\r\n if (!isoCode) return \"SHANGHAI\";\r\n if (isoCode === \"RUS\") return \"SHANGHAI\";\r\n if (americasSet.has(isoCode) || europeExclRussiaSet.has(isoCode)) return \"GMBH\";\r\n return \"SHANGHAI\";\r\n }\r\n\r\n const numericIsoMap = {\r\n 840:\"USA\",124:\"CAN\",826:\"GBR\",276:\"DEU\",250:\"FRA\",392:\"JPN\",36:\"AUS\",702:\"SGP\",710:\"ZAF\",76:\"BRA\",\r\n 356:\"IND\",156:\"CHN\",158:\"TWN\",410:\"KOR\",608:\"PHL\",643:\"RUS\",484:\"MEX\",724:\"ESP\",380:\"ITA\",528:\"NLD\",\r\n 756:\"CHE\",56:\"BEL\",40:\"AUT\",203:\"CZE\",348:\"HUN\",616:\"POL\",642:\"ROU\",100:\"BGR\",191:\"HRV\",705:\"SVN\",\r\n 688:\"SRB\",32:\"ARG\",152:\"CHL\",170:\"COL\",218:\"ECU\",604:\"PER\",862:\"VEN\",68:\"BOL\",600:\"PRY\",858:\"URY\",\r\n 52:\"BRB\",192:\"CUB\",214:\"DOM\",332:\"HTI\",388:\"JAM\",222:\"SLV\",320:\"GTM\",340:\"HND\",558:\"NIC\",188:\"CRI\",\r\n 591:\"PAN\",752:\"SWE\",578:\"NOR\",208:\"DNK\",246:\"FIN\",372:\"IRL\",804:\"UKR\",112:\"BLR\",440:\"LTU\",428:\"LVA\",\r\n 233:\"EST\",470:\"MLT\",300:\"GRC\",620:\"PRT\",703:\"SVK\",807:\"MKD\",499:\"MNE\",70:\"BIH\",50:\"BGD\",104:\"MMR\",\r\n 360:\"IDN\",364:\"IRN\",368:\"IRQ\",376:\"ISR\",400:\"JOR\",414:\"KWT\",422:\"LBN\",458:\"MYS\",512:\"OMN\",586:\"PAK\",\r\n 634:\"QAT\",682:\"SAU\",760:\"SYR\",784:\"ARE\",887:\"YEM\",12:\"DZA\",24:\"AGO\",72:\"BWA\",204:\"BEN\",262:\"DJI\",\r\n 266:\"GAB\",270:\"GMB\",288:\"GHA\",324:\"GIN\",384:\"CIV\",404:\"KEN\",426:\"LSO\",430:\"LBR\",450:\"MDG\",454:\"MWI\",\r\n 466:\"MLI\",478:\"MRT\",480:\"MUS\",504:\"MAR\",508:\"MOZ\",516:\"NAM\",562:\"NER\",566:\"NGA\",646:\"RWA\",686:\"SEN\",\r\n 690:\"SYC\",694:\"SLE\",706:\"SOM\",716:\"ZWE\",728:\"SSD\",748:\"SWZ\",768:\"TGO\",788:\"TUN\",800:\"UGA\",834:\"TZA\",\r\n 894:\"ZMB\",818:\"EGY\",729:\"TCD\",226:\"GNQ\",231:\"ETH\",554:\"NZL\"\r\n };\r\n function getCountryISO(id) {\r\n if (typeof id === 'number') return numericIsoMap[id] === \"TWN\" ? \"CHN\" : numericIsoMap[id] || null;\r\n let code = id.toString().toUpperCase();\r\n return code === 'TWN' ? 'CHN' : code;\r\n }\r\n\r\n function getCountryFillStyle(countryCode) {\r\n const group = getRegionGroup(countryCode);\r\n return group === \"GMBH\" ? \"#7a8eae\" : \"#3b82f6\";\r\n }\r\n\r\n \/\/ ======================= \u5408\u4f5c\u4f19\u4f34\u9762\u677f\u7ec4\u4ef6 =======================\r\n class PartnersPanel {\r\n constructor(containerId, onCountrySelectCallback) {\r\n this.container = document.getElementById(containerId);\r\n this.onCountrySelect = onCountrySelectCallback;\r\n this.contactUrl = \"https:\/\/curetecglobal.com\/contact-us\";\r\n this.renderStatic();\r\n this.partnersContainer = this.container.querySelector('#dynamic-partners');\r\n this.countrySelect = this.container.querySelector('#country-select');\r\n this.countrySelect.addEventListener('change', (e) => this.handleSelectChange(e));\r\n }\r\n\r\n renderStatic() {\r\n this.container.innerHTML = `\r\n <h2>\ud83c\udf0d Curetec Global Distribution Network<\/h2>\r\n <div class=\"country-selector\">\r\n <label for=\"country-select\">\ud83d\udccd Select Partner Country:<\/label>\r\n <select id=\"country-select\">\r\n <option value=\"\">-- Select --<\/option>\r\n <option value=\"IND\">\ud83c\uddee\ud83c\uddf3 India<\/option>\r\n <option value=\"AUS\">\ud83c\udde6\ud83c\uddfa Australia<\/option>\r\n <option value=\"NZL\">\ud83c\uddf3\ud83c\uddff New Zealand<\/option>\r\n <option value=\"KOR\">\ud83c\uddf0\ud83c\uddf7 South Korea<\/option>\r\n <option value=\"PHL\">\ud83c\uddf5\ud83c\udded Philippines<\/option>\r\n <option value=\"RUS\">\ud83c\uddf7\ud83c\uddfa Russia<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"dynamic-partners\" class=\"partners-container\">\r\n <p class=\"no-partner\" style=\"text-align:center; color:#95adcc;\">\u2728 Click the red pin on the map or<br>select from dropdown to view partner details<\/p>\r\n <\/div>\r\n `;\r\n this.partnersContainer = this.container.querySelector('#dynamic-partners');\r\n this.countrySelect = this.container.querySelector('#country-select');\r\n }\r\n\r\n handleSelectChange(e) {\r\n const val = e.target.value;\r\n if (val && partnersData[val]) {\r\n this.displayPartners(val);\r\n if (this.onCountrySelect) this.onCountrySelect(val);\r\n } else if (val) {\r\n \/\/ \u9009\u62e9\u4e86\u6ca1\u6709\u5408\u4f5c\u4f19\u4f34\u7684\u56fd\u5bb6\r\n this.showNoPartnerMessage();\r\n if (this.onCountrySelect) this.onCountrySelect(null);\r\n } else {\r\n this.partnersContainer.innerHTML = '<p class=\"no-partner\" style=\"text-align:center;\">\u2728 Select a partner country from dropdown<\/p>';\r\n if (this.onCountrySelect) this.onCountrySelect(null);\r\n }\r\n }\r\n\r\n showNoPartnerMessage() {\r\n this.partnersContainer.innerHTML = `\r\n <div style=\"text-align:center;\">\r\n <p class=\"no-partner\" style=\"margin-bottom:16px;\">\u26a0\ufe0f No authorized partner in this region.<br>Please contact us directly.<\/p>\r\n <a href=\"${this.contactUrl}\" target=\"_blank\" class=\"global-contact-link\">\ud83d\udce7 Contact Us<\/a>\r\n <\/div>\r\n `;\r\n }\r\n\r\n displayPartners(countryCode) {\r\n const partners = partnersData[countryCode];\r\n if (!partners || partners.length === 0) {\r\n this.showNoPartnerMessage();\r\n return;\r\n }\r\n this.partnersContainer.innerHTML = '';\r\n partners.forEach((partner, idx) => {\r\n const tab = document.createElement('div');\r\n tab.className = 'partner-tab';\r\n const isMobile = window.innerWidth <= 768;\r\n const needsMarquee = !isMobile && partner.name.length > 18;\r\n const companyHtml = needsMarquee ? `<div class=\"marquee-container\"><div class=\"marquee-content\">${partner.name}<\/div><\/div>` : `<span>${partner.name}<\/span>`;\r\n tab.innerHTML = `\r\n <button class=\"partner-header\">\r\n <div style=\"flex:1; text-align:left; min-width:0;\">${companyHtml}<\/div>\r\n <span class=\"arrow\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"partner-content\" id=\"content-${idx}\">\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=\"https:\/\/${partner.website.replace(\/^https?:\\\/\\\/\/, '')}\" target=\"_blank\" class=\"clickable-website\">${partner.website}<\/a><\/p>\r\n <\/div>\r\n <div class=\"products-section\"><h3 style=\"color:#90b4ff; margin:12px 0 8px;\">\ud83d\udee0\ufe0f Main Products<\/h3>${partner.products.map(p => `<div class=\"product-item\">\u2022 ${p}<\/div>`).join('')}<\/div>\r\n <a href=\"mailto:${partner.email.trim()}\" class=\"contact-link\">\ud83d\udce7 Get Quote & Tech Support<\/a>\r\n <\/div>\r\n `;\r\n this.partnersContainer.appendChild(tab);\r\n const header = tab.querySelector('.partner-header');\r\n const content = tab.querySelector('.partner-content');\r\n const arrow = header.querySelector('.arrow');\r\n header.addEventListener('click', () => {\r\n const isExpanded = content.classList.contains('expanded');\r\n document.querySelectorAll('.partner-tab .partner-content').forEach(c => {\r\n if (c !== content) {\r\n c.classList.remove('expanded');\r\n if(c.previousElementSibling) c.previousElementSibling.querySelector('.arrow').style.transform = 'rotate(0deg)';\r\n }\r\n });\r\n if (isExpanded) {\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 if (idx === 0) { content.classList.add('expanded'); arrow.style.transform = 'rotate(180deg)'; }\r\n if (needsMarquee) {\r\n const marqueeDiv = tab.querySelector('.marquee-content');\r\n if(marqueeDiv) {\r\n header.addEventListener('mouseenter', () => marqueeDiv.classList.add('scrolling'));\r\n header.addEventListener('mouseleave', () => marqueeDiv.classList.remove('scrolling'));\r\n }\r\n }\r\n });\r\n this.countrySelect.value = countryCode;\r\n }\r\n\r\n setSelectedCountry(countryCode, hasPartner) {\r\n if (hasPartner && partnersData[countryCode]) {\r\n this.displayPartners(countryCode);\r\n } else if (countryCode && !hasPartner) {\r\n this.showNoPartnerMessage();\r\n this.countrySelect.value = \"\";\r\n } else if (!countryCode) {\r\n this.partnersContainer.innerHTML = '<p class=\"no-partner\" style=\"text-align:center;\">\u2728 Click the red pin on the map or<br>select from dropdown to view partner details<\/p>';\r\n this.countrySelect.value = \"\";\r\n }\r\n }\r\n }\r\n\r\n \/\/ ======================= \u4e16\u754c\u5730\u56fe\u7ec4\u4ef6 =======================\r\n class WorldMapComponent {\r\n constructor(containerId, onCountryClickCallback) {\r\n this.container = document.getElementById(containerId);\r\n this.onCountryClick = onCountryClickCallback;\r\n this.svg = null; this.g = null; this.projection = null; this.path = null; this.zoom = null;\r\n this.selectedCountry = null;\r\n this.worldData = null;\r\n this.countriesFeatures = null;\r\n this.init();\r\n }\r\n\r\n init() {\r\n const width = this.container.clientWidth, height = this.container.clientHeight;\r\n if (width <= 100 || height <= 100) { setTimeout(() => this.init(), 150); return; }\r\n const isMobile = width < 700;\r\n const scaleVal = isMobile ? 70 : 120;\r\n this.projection = d3.geoMercator().scale(scaleVal).translate([width\/2, height\/1.55]);\r\n this.path = d3.geoPath().projection(this.projection);\r\n this.svg = d3.select(\"#world-map\").attr(\"width\", width).attr(\"height\", height);\r\n this.svg.selectAll(\"*\").remove();\r\n this.g = this.svg.append(\"g\");\r\n this.zoom = d3.zoom().scaleExtent([0.5, 10]).on(\"zoom\", (event) => { this.g.attr(\"transform\", event.transform); });\r\n this.svg.call(this.zoom);\r\n if (this.g.select(\"defs\").empty()) {\r\n const defs = this.g.append(\"defs\");\r\n defs.append(\"filter\").attr(\"id\", \"glow\").attr(\"x\", \"-20%\").attr(\"y\", \"-20%\").attr(\"width\", \"140%\").attr(\"height\", \"140%\")\r\n .append(\"feDropShadow\").attr(\"dx\", 0).attr(\"dy\", 0).attr(\"stdDeviation\", 3).attr(\"flood-color\", \"#ffffff\").attr(\"flood-opacity\", 0.6);\r\n }\r\n this.fetchMapData();\r\n this.attachControls();\r\n }\r\n\r\n attachControls() {\r\n const zoomIn = this.container.querySelector('.zoom-in-btn');\r\n const zoomOut = this.container.querySelector('.zoom-out-btn');\r\n const reset = this.container.querySelector('.reset-btn');\r\n if (zoomIn) zoomIn.addEventListener('click', () => this.svg.transition().duration(280).call(this.zoom.scaleBy, 1.35));\r\n if (zoomOut) zoomOut.addEventListener('click', () => this.svg.transition().duration(280).call(this.zoom.scaleBy, 0.7));\r\n if (reset) reset.addEventListener('click', () => this.svg.transition().duration(350).call(this.zoom.transform, d3.zoomIdentity));\r\n }\r\n\r\n fetchMapData() {\r\n const sources = [\"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 let idx = 0;\r\n const attempt = () => {\r\n if (idx >= sources.length) { document.getElementById('loading-message').textContent = \"Map failed to load. Please refresh.\"; return; }\r\n d3.json(sources[idx]).then(data => { this.worldData = data; this.renderMap(); }).catch(() => { idx++; attempt(); });\r\n };\r\n attempt();\r\n }\r\n\r\n renderMap() {\r\n document.getElementById('loading-message').style.display = 'none';\r\n let countries;\r\n if (this.worldData.objects && this.worldData.objects.countries) {\r\n countries = topojson.feature(this.worldData, this.worldData.objects.countries).features;\r\n } else if (this.worldData.features) {\r\n countries = this.worldData.features;\r\n } else return;\r\n countries = countries.filter(d => getCountryISO(d.id) !== 'TWN');\r\n this.countriesFeatures = countries;\r\n \r\n const pathsUpdate = this.g.selectAll(\"path\").data(countries, d => d.id);\r\n pathsUpdate.exit().remove();\r\n const paths = pathsUpdate.enter().append(\"path\").merge(pathsUpdate);\r\n paths.attr(\"d\", this.path)\r\n .attr(\"class\", \"country-path\")\r\n .attr(\"data-code\", d => getCountryISO(d.id))\r\n .style(\"fill\", (d) => {\r\n const code = getCountryISO(d.id);\r\n return getCountryFillStyle(code);\r\n })\r\n .on(\"click\", (event, d) => {\r\n const code = getCountryISO(d.id);\r\n const hasPartner = !!(code && partnersData[code]);\r\n this.setSelectedCountry(code);\r\n if (this.onCountryClick) this.onCountryClick(code, hasPartner);\r\n })\r\n .on(\"mouseover\", function() { d3.select(this).style(\"filter\", \"brightness(0.95)\"); })\r\n .on(\"mouseout\", function() { d3.select(this).style(\"filter\", \"\"); });\r\n \r\n this.updateMapVisuals();\r\n this.renderPins();\r\n \r\n if (!this.selectedCountry) {\r\n const defaultCode = \"IND\";\r\n this.setSelectedCountry(defaultCode);\r\n if (this.onCountryClick) this.onCountryClick(defaultCode, true);\r\n }\r\n }\r\n\r\n renderPins() {\r\n this.g.selectAll(\".flat-pin\").remove();\r\n if (!this.countriesFeatures) return;\r\n const partnerCountries = this.countriesFeatures.filter(d => {\r\n const code = getCountryISO(d.id);\r\n return code && partnersData[code];\r\n });\r\n partnerCountries.forEach(feature => {\r\n const code = getCountryISO(feature.id);\r\n const centroid = this.path.centroid(feature);\r\n if (centroid && !isNaN(centroid[0]) && !isNaN(centroid[1])) {\r\n const x = centroid[0];\r\n const y = centroid[1];\r\n const pinGroup = this.g.append(\"g\")\r\n .attr(\"class\", \"flat-pin\")\r\n .attr(\"transform\", `translate(${x}, ${y})`)\r\n .style(\"cursor\", \"pointer\")\r\n .on(\"click\", (event) => {\r\n event.stopPropagation();\r\n const hasPartner = !!(code && partnersData[code]);\r\n this.setSelectedCountry(code);\r\n if (this.onCountryClick) this.onCountryClick(code, hasPartner);\r\n });\r\n pinGroup.append(\"circle\")\r\n .attr(\"cx\", 0)\r\n .attr(\"cy\", -2)\r\n .attr(\"r\", 5)\r\n .attr(\"class\", \"pin-circle\")\r\n .attr(\"fill\", \"#EF4444\")\r\n .attr(\"stroke\", \"#B91C1C\")\r\n .attr(\"stroke-width\", 0.8);\r\n pinGroup.append(\"line\")\r\n .attr(\"x1\", 0)\r\n .attr(\"y1\", 3)\r\n .attr(\"x2\", 0)\r\n .attr(\"y2\", 8)\r\n .attr(\"stroke\", \"#B91C1C\")\r\n .attr(\"stroke-width\", 1.2)\r\n .attr(\"stroke-linecap\", \"round\");\r\n pinGroup.append(\"circle\")\r\n .attr(\"cx\", -1.5)\r\n .attr(\"cy\", -3.5)\r\n .attr(\"r\", 1)\r\n .attr(\"fill\", \"#FCA5A5\")\r\n .attr(\"opacity\", 0.8);\r\n }\r\n });\r\n }\r\n\r\n updateMapVisuals() {\r\n if (!this.g) return;\r\n this.g.selectAll(\"path.country-path\")\r\n .attr(\"fill\", (d) => {\r\n const code = getCountryISO(d.id);\r\n return getCountryFillStyle(code);\r\n })\r\n .attr(\"stroke\", (d) => {\r\n const code = getCountryISO(d.id);\r\n return (code === this.selectedCountry) ? \"#ffffff\" : \"rgba(25, 35, 55, 0.7)\";\r\n })\r\n .attr(\"stroke-width\", (d) => {\r\n const code = getCountryISO(d.id);\r\n return (code === this.selectedCountry) ? \"2.2\" : \"0.7\";\r\n })\r\n .attr(\"filter\", (d) => {\r\n const code = getCountryISO(d.id);\r\n return (code === this.selectedCountry) ? \"url(#glow)\" : null;\r\n });\r\n }\r\n\r\n setSelectedCountry(code) {\r\n this.selectedCountry = code;\r\n this.updateMapVisuals();\r\n }\r\n\r\n resize() {\r\n const width = this.container.clientWidth, height = this.container.clientHeight;\r\n if (!width || !height) return;\r\n const isMobile = width < 700;\r\n this.projection.scale(isMobile ? 70 : 120).translate([width\/2, height\/1.55]);\r\n this.path = d3.geoPath().projection(this.projection);\r\n this.svg.attr(\"width\", width).attr(\"height\", height);\r\n if (this.worldData) {\r\n this.renderMap();\r\n }\r\n }\r\n }\r\n\r\n \/\/ ======================= \u5e94\u7528\u542f\u52a8 =======================\r\n let mapComponent, panelComponent;\r\n window.addEventListener('load', () => {\r\n panelComponent = new PartnersPanel('partner-panel-root', (countryCode) => {\r\n if (countryCode && partnersData[countryCode]) {\r\n mapComponent.setSelectedCountry(countryCode);\r\n } else if (countryCode === null) {\r\n mapComponent.setSelectedCountry(null);\r\n }\r\n });\r\n mapComponent = new WorldMapComponent('map-root', (countryCode, hasPartner) => {\r\n if (countryCode) {\r\n panelComponent.setSelectedCountry(countryCode, hasPartner);\r\n } else {\r\n panelComponent.setSelectedCountry(null, false);\r\n }\r\n });\r\n let resizeTimer;\r\n window.addEventListener('resize', () => {\r\n clearTimeout(resizeTimer);\r\n resizeTimer = setTimeout(() => {\r\n if (mapComponent) mapComponent.resize();\r\n }, 200);\r\n });\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. Curetec Global Distribution – Partner Map + \u2212 \u27f3 Reset \ud83d\uddfa\ufe0f Loading map… Curetec […]<\/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:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/pages\/2410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/comments?post=2410"}],"version-history":[{"count":163,"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/pages\/2410\/revisions"}],"predecessor-version":[{"id":4136,"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/pages\/2410\/revisions\/4136"}],"wp:attachment":[{"href":"https:\/\/curetecglobal.com\/zh\/wp-json\/wp\/v2\/media?parent=2410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}