1(function () { 2 // æ³¨å ¥æ ·å¼ 3 const style = document.createElement('style'); 4 style.innerHTML = ` 5 @keyframes heart { 6 from { transform: translate(0, 0); } 7 to { transform: translate(0, -0.25rem); } 8 } 9 .flexRowStart { 10 display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; 11 } 12 .flexRowBetween { 13 display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; 14 } 15 .flexColCenter { 16 display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; 17 } 18 .guide_wrap { 19 position: fixed; top: 35px; right: 35px; z-index: 9999; 20 width: 425px; min-height: 415px; background: #FFFFFF; 21 box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.16); border-radius: 8px; 22 opacity: 0; pointer-events: none; 23 transition: opacity 0.3s ease, transform 0.3s ease; 24 transform: translateY(10px); 25 } 26 .guide_wrap.show { 27 display: block; 28 opacity: 1; pointer-events: auto; 29 animation: heart .8s ease-in-out 1.2s infinite alternate; 30 transform: translateY(0); 31 } 32 .guide_wrap .guide_header { position: relative; } 33 .guide_wrap .img_p { 34 position: absolute; top: -24px; right: 26px; 35 } 36 .guide_wrap .guide_content { 37 width: 100%; padding: 16px 20px 30px 20px; box-sizing: border-box; 38 } 39 .guide_wrap .install_guide_close, .install_guide_close:focus { 40 width: 32px; height: 32px; 41 background: url("/images-new/dl_popup/common_quit.png") 0px 0px no-repeat; 42 } 43 .guide_wrap .install_guide_close:hover { 44 cursor: pointer; background-position: 0px -32px; 45 } 46 .guide_wrap .install_guide_close:active { 47 background-position: 0px -64px; 48 } 49 .guide_wrap .guide_title { 50 margin-left: 20px; font-size: 18px; font-weight: 700; 51 } 52 .step1 { margin-top: 20px } 53 .step_item { 54 min-width: 48px; height: 20px; line-height: 12px; font-size: 12px; text-align: center; 55 background-color: rgba(0, 167, 79, 0.1); color: #00A74F; border-radius: 4px; 56 padding: 4px; box-sizing: border-box; font-weight: 700; 57 } 58 .step_item_text { 59 margin-left: 16px; font-size: 14px; font-weight: 700; 60 } 61 .step2 { margin-top: 10px } 62 .step2 .more_help { margin-top: 6px; } 63 .step2 .more_help a { 64 text-decoration: none; color: #0052D9; font-size: 14px; font-weight: 400; 65 } 66 .step_footer { 67 width: 100%; background-color: #F5F5F5; height: 58px; 68 border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; 69 } 70 `; 71 document.head.appendChild(style); 72 73 // æ³¨å ¥å¼å¯¼ HTML 74 const guideHTML = ` 75 <div class="guide_wrap" style="display:none;"> 76 <div class="guide_content"> 77 <div class="flexRowBetween guide_header"> 78 <div class="flexRowStart" style="width:90%;"> 79 <img src="/images-new/dl_popup/common_download.png" style="width:40px;height:40px;" alt="Installation Steps"> 80 <div class="guide_title">Follow the Installation Steps</div> 81 </div> 82 <div class="install_guide_close" tabindex="0" role="button" aria-label="Close Installation Wizard"></div> 83 <img class="img_p" src="/images-new/dl_popup/polygon.png" alt="Installation Steps Guide"> 84 </div> 85 <div class="step1"> 86 <div class="flexRowStart"> 87 <div class="step_item">Step1:</div> 88 <div class="step_item_text step1_text">Open the downloaded installer file</div> 89 </div> 90 <div class="flexRowStart" style="margin-top:8px;"> 91 <div class="flexRowStart" style="width:48px; justify-content: center;"> 92 <img src="/images-new/dl_popup/arrow.png" alt="Installation Steps"> 93 </div> 94 <img style="margin-left:16px;" src="/images-new/dl_popup/common_img_step1.png" alt="installation step 1"> 95 </div> 96 </div> 97 <div class="step2"> 98 <div class="flexRowStart"> 99 <div class="step_item">Step2:</div> 100 <div class="step_item_text step2_text">Follow the prompts to complete the installation of</div> 101 </div> 102 <div class="flexRowStart" style="margin-top:8px;"> 103 <div style="width:64px;"></div> 104 <div> 105 <img src="/images-new/dl_popup/common_img_step2.png" alt="installation step 2"> 106 <div class="more_help"><a class="help_link" href="#" target="_blank" rel="noopener noreferrer">View Detailed Installation Guide ></a></div> 107 </div> 108 </div> 109 </div> 110 </div> 111 <div class="flexColCenter step_footer"> 112 <img src="/images-new/dl_popup/common_img_save_logo.png" alt="installation successful"> 113 </div> 114 </div>`; 115 document.body.insertAdjacentHTML('afterbegin', guideHTML); 116 117 const validExtensions = ['.exe', '.dmg', '.zip']; 118 const filenameMap = { 119 'syncios-location-changer': { 120 product: 'Syncios Location Changer', 121 help: 'https://www.syncios.com/location-changer/guide.html' 122 }, 123 'syncios-passcode-unlocker': { 124 product: 'Syncios Passcode Unlocker', 125 help: 'https://www.syncios.com/passcode-unlocker/guide.html' 126 }, 127 'syncios-dsavior': { 128 product: 'Syncios D-Savior', 129 help: 'https://www.syncios.com/d-savior/guide.html' 130 }, 131 'syncios_whatsapp_transfer': { 132 product: 'Syncios WhatsApp Transfer', 133 help: 'https://www.syncios.com/whatsapp-transfer/guide.html' 134 }, 135 'setup_syncios': { 136 product: 'Syncios Mobile Manager', 137 help: 'https://www.syncios.com/guide.html' 138 }, 139 'toolkit_manager': { 140 product: 'Syncios Mobile Manager', 141 help: 'https://www.syncios.com/guide.html' 142 }, 143 'syncios': { 144 product: 'Syncios Mobile Manager', 145 help: 'https://www.syncios.com/mac-ios-manager/guide.html' 146 }, 147 'syncios_data_transfer': { 148 product: 'Syncios Data Transfer', 149 help: 'https://www.syncios.com/data-transfer/guide.html' 150 }, 151 'syncios_mac_data_transfer': { 152 product: 'Syncios Data Transfer', 153 help: 'https://www.syncios.com/mac-data-transfer/guide.html' 154 }, 155 'syncios-data-recovery': { 156 product: 'Syncios Data Recovery', 157 help: 'https://www.syncios.com/ios-data-recovery/guide.html' 158 }, 159 'ios-eraser-pro-setup': { 160 product: 'Syncios iOS Eraser', 161 help: 'https://www.syncios.com/ios-data-eraser/guide.html' 162 }, 163 'syncios_toolkit_setup': { 164 product: 'Syncios Toolkit', 165 help: 'https://www.syncios.com/support/registration-faqs.html#q3' 166 }, 167 'syncios_youtube_downloader': { 168 product: 'Syncios YouTube Video Downloader', 169 help: 'https://www.syncios.com/youtube-video-downloader/guide.html' 170 } 171 }; 172 173 function extractFilename(href) { 174 return href.split('/').pop().split('?')[0].split('#')[0]; 175 } 176 177 function getBaseName(filename) { 178 return filename.replace(/\.[^/.]+$/, '').toLowerCase(); 179 } 180 181 function hasValidExtension(filename) { 182 return validExtensions.some(ext => filename.toLowerCase().endsWith(ext)); 183 } 184 185 let guideShown = false; 186 187 function showGuide(filename) { 188 if (guideShown) return; 189 guideShown = true; 190 191 const baseName = getBaseName(filename); 192 const info = filenameMap[baseName] || { product: 'This product', help: '#' }; 193 194 document.querySelector('.step1_text').textContent = `Open the downloaded installer file ${filename}`; 195 document.querySelector('.step2_text').textContent = `Follow the prompts to complete the installation of ${info.product} `; 196 const helpLink = document.querySelector('.help_link'); 197 helpLink.href = info.help; 198 helpLink.textContent = 'View Detailed Installation Guide >'; 199 200 const wrap = document.querySelector('.guide_wrap'); 201 wrap.style.display = 'block'; // ç¡®ä¿åå§å¯è§ 202 // 触åå¨ç»æ¾ç¤ºclass 203 setTimeout(() => { 204 wrap.classList.add('show'); 205 }, 20); 206 } 207 208 document.addEventListener('DOMContentLoaded', () => { 209 document.body.addEventListener('click', (e) => { 210 const a = e.target.closest('a'); 211 if (!a || !a.href) return; 212 213 const filename = extractFilename(a.href); 214 if (!hasValidExtension(filename)) return; 215 216 // å¼¹çªæ¾ç¤ºå»¶è¿2ç§ 217 setTimeout(() => { 218 showGuide(filename); 219 }, 2000); 220 });
221 222 const closeBtn = document.querySelector('.install_guide_close'); 223 if (closeBtn) { 224 closeBtn.addEventListener('click', () => { 225 const wrap = document.querySelector('.guide_wrap'); 226 wrap.classList.remove('show'); 227 setTimeout(() => { 228 wrap.style.display = 'none'; 229 guideShown = false; 230 }, 300); // çå¾ å¨ç»ç»æåéè 231 }); 232 } 233 }); 234})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.