`; } captchaCSS(options) { return ` .captcha { position: relative; width: var(--size-width); padding: 20px 15px 25px; text-align: center; background: #fff; } .captcha .captcha-title h2 { font-size: 14px; line-height: 14px; color: #b8b8b8; padding-bottom: 10px; } .captcha .captcha-title p { font-size: 18px; line-height: 24px; color: #1f1f1f; } .captcha-wrap { display: flex; align-items: center; justify-content: center; } .captcha-image { position: relative; overflow: hidden; margin: var(--size-img-margin) auto; } .captcha-img { position: relative; z-index: 999; width: var(--size-img); height: var(--size-img); -webkit-border-radius: 50%; border-radius: 50%; background: #f5f5f5; } .captcha-img img { width: 100%; height: 100%; pointer-events: none; border: 0; -webkit-border-radius: 50%; border-radius: 50%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -webkit-animation: fadeIn 0.8s forwards; animation: fadeIn 0.8s forwards; } .captcha-img.captcha-loading img { display: none; } .captcha-img .captcha-loader { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; } .captcha-img.captcha-loading .captcha-loader { display: flex } .captcha-coordinate { display: none; position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcoAAAHLBAMAAAC67sVKAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMAzGcNwPRatBpQE/jnAAACVElEQVR42u3asU3DUBSG0ShZgBsxAO9NkMILBCagSI+yAg0lo1PYCZZoiW3de05DiT7Br2sHdjsA8viuEHn4rFC5P1aoHJ5PBSpbvBSY5TneCswyosAwh4gCw2wR+Yd5OEfkH+Y+osAwh4gCw2wR+Yd5OEfkH+Y+osAwh7Ey+TDHWSYf5jTL5MOcZpl8mMOtMvUwb7NMPcz7LFMP8z7L1MMcfisTD/N3lomHOZtl4mHOZpl4mMO8Mu0w57PMO8xr7733iGPvvfeP1K8lEU+7/GpUAoB7qVKlSpUqAcC9VKlSpUqV3kkAwL1UqVKlSpUA4F6qVKlSpUrvJADgXqpUqVKlSgBwL1WqVKlSpXcSAHAvVapUqVIlALiXKlWqVKkSAPBUoFKlSpUqAcC9VKlSpUqVAICnApUqVapUCQDupUqVKlWqBAA8FahUWbTyeqpQ2V5PFSpj/czHa1Ehs0WFzBYVMltUyBwrs2dOlckzb5UrZi5yL1fPXLTynhnjt13sy+Xy/vhv9CczeeWUmb0yvvwsc+0y871M/WDQKkRu4dnHc6x3Eu+X2/usYKGn9ZV/kstUrv3rWuPzWJ+t/5MafyfZAP+7BQDupUqVKlWqBAD3UqVKlSpVAgCeClSqVKlSJQC4lypVqlSpEgDwVKBSpUqVKgHAvVSpUqVKlQCApwKVKlWqVAkA7qVKlSpVqgQA7yQqVapUqVIlALiXKlWqVKkSALyTqFSpUqVKlQDgXqpUqVKlSgDwTqJSpUqVKlUCgHupUqVKlSoBwL1UqVKlSpUqN+YHG9iGwKYOVR0AAAAASUVORK5CYII=); -webkit-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } .captcha-fail .captcha-coordinate { display: none !important; } .captcha-control { position: relative; width: var(--size-control); height: 50px; margin: 0 auto; } .captcha-control-wrap, .captcha-control-button { position: absolute; top: 0; height: 100%; -webkit-border-radius: 100px; border-radius: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .captcha-control-wrap { left: 0; width: 100%; background: #f5f5f5; overflow: hidden; } .captcha-control-button { position: absolute; width: 50px; background: #fff; cursor: pointer; cursor: var(--cursor-pointer); -webkit-box-shadow: 0 21px 52px 0 rgba(82,82,82,.2); box-shadow: 0 21px 52px 0 rgba(82,82,82,.2); -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } .captcha-control-button i { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; background-image: url('data:image/svg+xml;utf8,'); -webkit-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } .captcha-fail .captcha-control-button { border: 1px solid #f33; background: #f33 } .captcha-control-button.captcha-button-active { color: #fff; background: var(--theme); } .captcha-control-button.captcha-button-active i, .captcha-fail .captcha-control-button i { background-image: url('data:image/svg+xml;utf8,'); } .captcha-image .captcha-state { display: none; position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; background: rgba(0,0,0,0.7); transform: translate(0, 0); -webkit-animation: fadeIn 0.3s forwards; animation: fadeIn 0.3s forwards; } .captcha-image .captcha-state .captcha-state-icon-fail, .captcha-image .captcha-state .captcha-state-icon-success { display: none; } .captcha-success .captcha-image .captcha-state, .captcha-fail .captcha-image .captcha-state, .captcha-fail .captcha-image .captcha-state .captcha-state-icon-fail, .captcha-success .captcha-image .captcha-state .captcha-state-icon-success { display: block; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes horizontal { 0% { -webkit-transform: translate(0px,0); -ms-transform: translate(0px,0); transform: translate(0px,0) } 10%,30%,50%,70%,90% { -webkit-transform: translate(-1px,0); transform: translate(-1px,0) } 20%,40%,60%,80% { -webkit-transform: translate(1px,0); transform: translate(1px,0) } 100% { -webkit-transform: translate(0px,0); transform: translate(0px,0) } } @keyframes horizontal { 0% { -webkit-transform: translate(0px,0); transform: translate(0px,0) } 10%,30%,50%,70%,90% { -webkit-transform: translate(-1px,0); transform: translate(-1px,0) } 20%,40%,60%,80% { -webkit-transform: translate(1px,0); transform: translate(1px,0) } 100% { -webkit-transform: translate(0px,0); transform: translate(0px,0) } } .captcha-control-horizontal { -webkit-animation: horizontal .6s .2s ease both; -moz-animation: horizontal .6s .2s ease both; animation: horizontal .6s .2s ease both } .captcha .captcha-timer-progress-bar-wrap { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; overflow: hidden; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .captcha .captcha-timer-progress-bar { width: 100%; height: 4px; background-color: var(--progress-bar-color); } @media only screen and (max-width:400px) { }`; } }; Element.prototype.on = function(event, callback) { this.addEventListener(event, callback, false); return this; }; Element.prototype.off = function(event, callback) { this.removeEventListener(event, callback, false); return this; }; Element.prototype.once = function(type, callback) { var handle = function() { callback = callback.call(this); this.removeEventListener(type, handle) }; this.addEventListener(type, handle) }; Element.prototype.captcha = function(options) { if(!this.hasAttribute('data-' + libName)) { let instance = new Captcha(this, options); instances.push(instance); this.setAttribute('data-' + libName, true); return instance; } }; !(function (global) { let extend, _extend, _isObject; _isObject = function (o) { return Object.prototype.toString.call(o) === '[object Object]'; }; _extend = function self(destination, source) { let property; for (property in destination) { if (destination.hasOwnProperty(property)) { if (_isObject(destination[property]) && _isObject(source[property])) { self(destination[property], source[property]); } if (source.hasOwnProperty(property)) { continue; } else { source[property] = destination[property]; } } } }; extend = function () { let arr = arguments, result = {}, i; if (!arr.length) return {}; for (i = arr.length - 1; i >= 0; i--) { if (_isObject(arr[i])) { _extend(arr[i], result); } } arr[0] = result; return result; }; global.extend = extend; })(ulit); window.Captcha = Captcha; })(); if (typeof(module) !== 'undefined') { module.exports = window.Captcha; } else if (typeof define === 'function' && define.amd) { define([], function () { 'use strict'; return window.Captcha; }); } let myCaptcha = document.querySelectorAll('.J__captcha__').item(0).captcha({ timerProgressBar: !0, timerProgressBarColor: '#07f', url: { create: 'https://open.okktee.com/index/captcha/rotate', check: 'https://open.okktee.com/index/captcha/verify', img: 'https://open.okktee.com/index/captcha/img', }, init: function (captcha) { }, success: function() { setTimeout(() => {window.location.href = window.location.href;}, 2000); }, fail: function() { }, complete: function(state) { }, close: function(state) { } });