1<!DOCTYPE html><html lang="en"><head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <!-- No scaling allowed --> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <title>Clink</title> 7 <style>*, 8:before, 9:after { 10 box-sizing: border-box; 11} 12body { 13 margin: 0; 14} 15.tw-absolute { 16 position: absolute; 17} 18.tw-relative { 19 position: relative; 20} 21.tw-bottom-\[-30px\] { 22 bottom: -30px; 23} 24.tw-mb-\[12px\] { 25 margin-bottom: 12px; 26} 27.tw-mb-\[20px\] { 28 margin-bottom: 20px; 29} 30.tw-mb-\[32px\] { 31 margin-bottom: 32px; 32} 33.tw-mb-\[40px\] { 34 margin-bottom: 40px; 35} 36.tw-mt-\[32px\] { 37 margin-top: 32px; 38} 39.tw-mt-\[56px\] { 40 margin-top: 56px; 41} 42.tw-mt-\[64px\] { 43 margin-top: 64px; 44} 45.tw-mt-\[8px\] { 46 margin-top: 8px; 47} 48.tw-box-border { 49 box-sizing: border-box; 50} 51.tw-flex { 52 display: flex; 53} 54.tw-hidden { 55 display: none; 56} 57.tw-size-\[160px\] { 58 width: 160px; 59 height: 160px; 60} 61.tw-size-\[188px\] { 62 width: 188px; 63 height: 188px; 64} 65.tw-size-\[24px\] { 66 width: 24px; 67 height: 24px; 68} 69.tw-h-\[108px\] { 70 height: 108px; 71} 72.tw-h-\[16px\] { 73 height: 16px; 74} 75.tw-h-\[28px\] { 76 height: 28px; 77} 78.tw-h-\[40px\] { 79 height: 40px; 80} 81.tw-h-\[44px\] { 82 height: 44px; 83} 84.tw-h-\[72px\] { 85 height: 72px; 86} 87.tw-h-full { 88 height: 100%; 89} 90.tw-w-\[124px\] { 91 width: 124px; 92} 93.tw-w-\[86px\] { 94 width: 86px; 95} 96.tw-w-full { 97 width: 100%; 98} 99.tw-w-screen { 100 width: 100vw; 101} 102.tw-max-w-\[380px\] { 103 max-width: 380px; 104} 105.tw-flex-col { 106 flex-direction: column; 107} 108.tw-items-center { 109 align-items: center; 110} 111.tw-justify-center { 112 justify-content: center; 113} 114.tw-gap-\[16px\] { 115 gap: 16px; 116} 117.tw-rounded-\[20px\] { 118 border-radius: 20px; 119} 120.tw-rounded-\[8px\] { 121 border-radius: 8px; 122} 123.tw-rounded-full { 124 border-radius: 9999px; 125} 126.tw-bg-black\/5 { 127 background-color: #0000000d; 128} 129.tw-p-\[20px\] { 130 padding: 20px; 131} 132.tw-text-\[12px\] { 133 font-size: 12px; 134} 135.tw-text-\[\#AAA\] { 136 color: #aaa; 137} 138@media only screen and (min-width: 992px) { 139 .skeleton-payment-container { 140 width: 920px; 141 } 142 .skeleton-payment-container:before { 143 content: ''; 144 min-height: 100vh; 145 width: 50%; 146 z-index: -1; 147 background-color: #fff; 148 border-left: 1px solid #eee; 149 position: fixed; 150 top: 0; 151 left: 50%; 152 } 153} 154@media only screen and (max-width: 992px) { 155 .skeleton-payment-container { 156 max-width: 380px; 157 } 158} 159@keyframes shimmer { 160 0% { 161 background-position: 200% 0; 162 } 163 to { 164 background-position: -200% 0; 165 } 166} 167.skeleton-shimmer { 168 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%); 169 background-size: 200% 100%; 170 animation: shimmer 3.5s infinite linear; 171} 172@keyframes skeleton-scale { 173 0% { 174 transform: scale(0.9); 175 opacity: 0.1; 176 } 177 to { 178 transform: scale(1); 179 opacity: 1; 180 } 181} 182.animation-scale { 183 animation: skeleton-scale 0.3s; 184} 185@keyframes skeleton-enter-x-right { 186 0% { 187 transform: translate(20%); 188 opacity: 0; 189 } 190 to { 191 transform: translate(0); 192 opacity: 1; 193 } 194} 195@keyframes skeleton-enter-y-bottom { 196 0% { 197 transform: translateY(20%); 198 opacity: 0; 199 } 200 to { 201 transform: translateY(0); 202 opacity: 1; 203 } 204} 205@media only screen and (min-width: 992px) { 206 .animation-right-section { 207 animation: skeleton-enter-x-right 0.3s; 208 } 209} 210@media only screen and (max-width: 992px) { 211 .animation-right-section { 212 animation: skeleton-enter-y-bottom 0.3s; 213 } 214} 215@media (min-width: 992px) { 216 .lg\:tw-mt-0 { 217 margin-top: 0; 218 } 219 .lg\:tw-mt-\[48px\] { 220 margin-top: 48px; 221 } 222 .lg\:tw-block { 223 display: block; 224 } 225 .lg\:tw-hidden { 226 display: none; 227 } 228 .lg\:tw-w-\[160px\] { 229 width: 160px; 230 } 231 .lg\:tw-w-\[380px\] { 232 width: 380px; 233 } 234 .lg\:tw-max-w-\[380px\] { 235 max-width: 380px; 236 } 237 .lg\:tw-flex-row { 238 flex-direction: row; 239 } 240 .lg\:tw-justify-start { 241 justify-content: flex-start; 242 } 243 .lg\:tw-justify-between { 244 justify-content: space-between; 245 } 246 .lg\:tw-p-0 { 247 padding: 0; 248 } 249} 250</style> 251
251<script type="module" crossorigin="" src="/static/jse/index-index-C-ZSJqRk.js" integrity="sha512-2i7sYdtSGDWZtrAh+EbM9uUv6lhLURCqssiDcenEbXJtwn0cZhGPyaIHDnmnW0TPqaWPLM8W1QrgM2sy1u4bZA=="></script>
251 252 <link rel="stylesheet" crossorigin="" href="/static/css/index-CNcZIdeT.css" integrity="sha512-tbM5UqStN/enbDGm9uUYpON6AOr6Iu8ePA8FyMfQYuBdiKlezRlM/n4vbL4oPI48lsa7WHgWwHcpQMo17IXmtA=="> 253 </head> 254 <body> 255 <div id="root"><div id="clinkpay-skeleton-root" class="tw-relative tw-flex tw-justify-center tw-items-center tw-box-border tw-w-screen lg:tw-p-0 tw-p-[20px]"> 256 <div class="skeleton-payment-container tw-h-full tw-w-full tw-flex lg:tw-justify-between lg:tw-flex-row tw-flex-col lg:tw-mt-[48px]"> 257 <div class="animation-scale lg:tw-max-w-[380px] lg:tw-block tw-hidden"> 258 <div class="tw-rounded-full tw-size-[24px] skeleton-shimmer tw-bg-black/5"></div> 259 <div class="tw-mt-[32px] tw-flex tw-flex-col tw-gap-[16px]"> 260 <div class="tw-w-[86px] tw-h-[16px] tw-rounded-full tw-bg-black/5 skeleton-shimmer"></div> 261 <div class="tw-w-[124px] tw-h-[28px] tw-rounded-full tw-bg-black/5 skeleton-shimmer"></div> 262 </div> 263 <div class="tw-mt-[64px] tw-size-[188px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 264 </div> 265 266 <div class="animation-scale lg:tw-hidden tw-max-w-[380px]"> 267 <div class="tw-rounded-full tw-size-[24px] skeleton-shimmer tw-bg-black/5"></div> 268 <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-[32px] tw-mb-[12px]"> 269 <div class="tw-size-[160px] tw-rounded-[8px] skeleton-shimmer tw-bg-black/5 tw-mb-[20px]"></div> 270 <div class="tw-w-[86px] tw-h-[16px] tw-rounded-full skeleton-shimmer tw-bg-black/5"></div> 271 <div class="tw-w-[124px] tw-h-[28px] tw-rounded-full skeleton-shimmer tw-bg-black/5 tw-mt-[8px] tw-mb-[32px]"></div> 272 </div> 273 </div> 274 275 <div class="animation-right-section lg:tw-max-w-[380px] tw-w-full skeleton-payment-right-section"> 276 <div class="tw-mb-[40px] tw-h-[28px] lg:tw-w-[160px] tw-rounded-[20px] tw-bg-black/5 skeleton-shimmer"></div> 277 <div class="tw-mb-[40px] tw-h-[40px] lg:tw-w-[380px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 278 <div class="tw-mb-[40px] tw-h-[72px] lg:tw-w-[380px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 279 <div class="tw-mb-[40px] tw-h-[40px] lg:tw-w-[380px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 280 <div class="tw-mb-[40px] tw-h-[72px] lg:tw-w-[380px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 281 <div class="tw-h-[108px] lg:tw-w-[380px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 282 <div class="tw-mt-[56px] tw-h-[44px] lg:tw-w-[380px] tw-rounded-[8px] tw-bg-black/5 skeleton-shimmer"></div> 283 </div> 284 </div> 285</div> 286
287<script> 288 // Do not display skeleton screen on callback page and third-part-qrcode-elements page 289 if ( 290 window.location.href.includes('/pay/callback') || 291 window.location.href.includes('/hosted/third-part-qrcode-elements') 292 ) { 293 document.getElementById('clinkpay-skeleton-root').style.display = 'none'; 294 const loaderStyle = document.createElement('style'); 295 loaderStyle.textContent = ` 296 .hosted-loader-container { 297 display: flex; 298 justify-content: center; 299 align-items: center; 300 overflow: hidden; 301 width: 100vw; 302 height: 100vh; 303 } 304 305 .hosted-loader-container > .hosted-loader { 306 width: 48px; 307 height: 48px; 308 border: 5px solid #eee; 309 border-bottom-color: #ff3d00; 310 border-radius: 50%; 311 display: inline-block; 312 box-sizing: border-box; 313 animation: rotation 1s linear infinite; 314 } 315 316 @keyframes rotation { 317 0% { 318 transform: rotate(0deg); 319 } 320 100% { 321 transform: rotate(360deg); 322 } 323 } 324 `; 325 // Create dedicated loading elements 326 // before react mounted 327 const doNotNeedSkeletonContainer = document.createElement('div'); 328 doNotNeedSkeletonContainer.className = 'hosted-loader-container'; 329 // loader 330 const threeDsLoadingElement = document.createElement('div'); 331 threeDsLoadingElement.className = 'hosted-loader'; 332 // append 333 doNotNeedSkeletonContainer.appendChild(threeDsLoadingElement); 334 doNotNeedSkeletonContainer.appendChild(loaderStyle); 335 document.querySelector('div#root').appendChild(doNotNeedSkeletonContainer); 336 } 337</script>
337 338</div> 339 340
341<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"b384417300184e8792219e534a2a10f1","r":1,"spa":2}' crossorigin="anonymous"></script>
341 342</body></html>
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.