27 lines
14 KiB
HTML
27 lines
14 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="robots" content="noindex">
|
|
<script>
|
|
var APIkeys = ["AIzaSyBAb4nM48dVlty7LPHm_qrcWrhlQ1P205U"];
|
|
function getText(t,e){var n=new XMLHttpRequest;n.onreadystatechange=function(){4==n.readyState&&200==n.status&&e(JSON.parse(n.responseText))},n.open("GET",t),n.send()}function queryName(){getText("https://www.googleapis.com/youtube/v3/search?part=snippet&q="+encodeURIComponent(rawInput)+"&type=channel&maxResults=1&key="+getKey(),function(t){return t.pageInfo.totalResults<1?void(document.querySelector("#username").textContent="Not Found!"):(document.getElementById("dp").src=t.items[0].snippet.thumbnails["default"].url,document.querySelector("#username").textContent=t.items[0].snippet.title,void(username=t.items[0].snippet.channelId.trim()))})}function live(){var t=username.length>=24&&"UC"==username.substr(0,2).toUpperCase()?"id":"forUsername",e="https://www.googleapis.com/youtube/v3/channels?part=statistics&"+t+"="+username+"&fields=items/statistics/subscriberCount&key="+getKey();getText(e,function(t){if(username){var e=t.items[0].statistics.subscriberCount;isLive?document.querySelector(".count_live").textContent=e:(new Odometer({el:document.querySelector(".count_live"),value:e,format:"(,ddd)",theme:"minimal"}),isLive=1)}})}function getKey(){return++keyIndex,keyIndex==APIkeys.length&&(keyIndex=0),APIkeys[keyIndex]}function remsize(){var t=document.querySelector(":root");t.style.fontSize=window.innerWidth/100}var te=location.hash.split("#!/")[1],rawInput=te.trim(),keyIndex=0,username,isLive=0;window.onload=function(){queryName(),setInterval(live,1e3)},remsize(),window.addEventListener("resize",remsize,!1),function(){var t,e,n,i,o,r,s,a,u,d,l,h,c,p,m,f,g,v,w,y,M,b,x,T,E,S,L,C,q,k,D,I,A=[].slice;g='<span class="odometer-value"></span>',p='<span class="odometer-ribbon"><span class="odometer-ribbon-inner">'+g+"</span></span>",i='<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">'+p+"</span></span>",s='<span class="odometer-formatting-mark"></span>',n="(,ddd).dd",a=/^\(?([^)]*)\)?(?:(.)(d+))?$/,u=30,r=2e3,t=20,d=2,o=.5,l=1e3/u,e=1e3/t,m="transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",E=document.createElement("div").style,f=null!=E.transition||null!=E.webkitTransition||null!=E.mozTransition||null!=E.oTransition,x=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,h=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,w=function(t){var e;return e=document.createElement("div"),e.innerHTML=t,e.children[0]},b=function(t,e){return t.className=t.className.replace(new RegExp("(^| )"+e.split(" ").join("|")+"( |$)","gi")," ")},v=function(t,e){return b(t,e),t.className+=" "+e},S=function(t,e){var n;return null!=document.createEvent?(n=document.createEvent("HTMLEvents"),n.initEvent(e,!0,!0),t.dispatchEvent(n)):void 0},M=function(){var t,e;return null!=(t=null!=(e=window.performance)&&"function"==typeof e.now?e.now():void 0)?t:+new Date},T=function(t,e){return null==e&&(e=0),e?(t*=Math.pow(10,e),t+=.5,t=Math.floor(t),t/=Math.pow(10,e)):Math.round(t)},L=function(t){return 0>t?Math.ceil(t):Math.floor(t)},y=function(t){return t-T(t)},q=!1,(C=function(){var t,e,n,i,o;if(!q&&null!=window.jQuery){for(q=!0,i=["html","text"],o=[],e=0,n=i.length;n>e;e++)t=i[e],o.push(function(t){var e;return e=window.jQuery.fn[t],window.jQuery.fn[t]=function(t){var n;return null==t||null==(null!=(n=this[0])?n.odometer:void 0)?e.apply(this,arguments):this[0].odometer.update(t)}}(t));return o}})(),setTimeout(C,0),c=function(){function t(e){var n,i,o,s,a,u,h,c,p,m,f=this;if(this.options=e,this.el=this.options.el,null!=this.el.odometer)return this.el.odometer;this.el.odometer=this,c=t.options;for(i in c)s=c[i],null==this.options[i]&&(this.options[i]=s);null==(a=this.options).duration&&(a.duration=r),this.MAX_VALUES=this.options.duration/l/d|0,this.resetFormat(),this.value=this.cleanValue(null!=(p=this.options.value)?p:""),this.renderInside(),this.render();try{for(m=["innerHTML","innerText","textContent"],u=0,h=m.length;h>u;u++)o=m[u],null!=this.el[o]&&!function(t){return Object.defineProperty(f.el,t,{get:function(){var e;return"innerHTML"===t?f.inside.outerHTML:null!=(e=f.inside.innerText)?e:f.inside.textContent},set:function(t){return f.update(t)}})}(o)}catch(g){n=g,this.watchForMutations()}}return t.prototype.renderInside=function(){return this.inside=document.createElement("div"),this.inside.className="odometer-inside",this.el.innerHTML="",this.el.appendChild(this.inside)},t.prototype.watchForMutations=function(){var t,e=this;if(null!=h)try{return null==this.observer&&(this.observer=new h(function(){var t;return t=e.el.innerText,e.renderInside(),e.render(e.value),e.update(t)})),this.watchMutations=!0,this.startWatchingMutations()}catch(n){t=n}},t.prototype.startWatchingMutations=function(){return this.watchMutations?this.observer.observe(this.el,{childList:!0}):void 0},t.prototype.stopWatchingMutations=function(){var t;return null!=(t=this.observer)?t.disconnect():void 0},t.prototype.cleanValue=function(t){var e;return"string"==typeof t&&(t=t.replace(null!=(e=this.format.radix)?e:".","<radix>"),t=t.replace(/[.,]/g,""),t=t.replace("<radix>","."),t=parseFloat(t,10)||0),T(t,this.format.precision)},t.prototype.bindTransitionEnd=function(){var t,e,n,i,o,r,s=this;if(!this.transitionEndBound){for(this.transitionEndBound=!0,e=!1,o=m.split(" "),r=[],n=0,i=o.length;i>n;n++)t=o[n],r.push(this.el.addEventListener(t,function(){return e?!0:(e=!0,setTimeout(function(){return s.render(),e=!1,S(s.el,"odometerdone")},0),!0)},!1));return r}},t.prototype.resetFormat=function(){var t,e,i,o,r,s,u,d;if(t=null!=(u=this.options.format)?u:n,t||(t="d"),i=a.exec(t),!i)throw new Error("Odometer: Unparsable digit format");return d=i.slice(1,4),s=d[0],r=d[1],e=d[2],o=(null!=e?e.length:void 0)||0,this.format={repeating:s,radix:r,precision:o}},t.prototype.render=function(t){var e,n,i,o,r,s,a,u,d,l,h,c;for(null==t&&(t=this.value),this.stopWatchingMutations(),this.resetFormat(),this.inside.innerHTML="",s=this.options.theme,e=this.el.className.split(" "),r=[],u=0,l=e.length;l>u;u++)n=e[u],n.length&&((o=/^odometer-theme-(.+)$/.exec(n))?s=o[1]:/^odometer(-|$)/.test(n)||r.push(n));for(r.push("odometer"),f||r.push("odometer-no-transitions"),r.push(s?"odometer-theme-"+s:"odometer-auto-theme"),this.el.className=r.join(" "),this.ribbons={},this.digits=[],a=!this.format.precision||!y(t)||!1,c=t.toString().split("").reverse(),d=0,h=c.length;h>d;d++)i=c[d],"."===i&&(a=!0),this.addDigit(i,a);return this.startWatchingMutations()},t.prototype.update=function(t){var e,n=this;return t=this.cleanValue(t),(e=t-this.value)?(b(this.el,"odometer-animating-up odometer-animating-down odometer-animating"),e>0?v(this.el,"odometer-animating-up"):v(this.el,"odometer-animating-down"),this.stopWatchingMutations(),this.animate(t),this.startWatchingMutations(),setTimeout(function(){return n.el.offsetHeight,v(n.el,"odometer-animating")},0),this.value=t):void 0},t.prototype.renderDigit=function(){return w(i)},t.prototype.insertDigit=function(t,e){return null!=e?this.inside.insertBefore(t,e):this.inside.children.length?this.inside.insertBefore(t,this.inside.children[0]):this.inside.appendChild(t)},t.prototype.addSpacer=function(t,e,n){var i;return i=w(s),i.innerHTML=t,n&&v(i,n),this.insertDigit(i,e)},t.prototype.addDigit=function(t,e){var n,i,o,r;if(null==e&&(e=!0),"-"===t)return this.addSpacer(t,null,"odometer-negation-mark");if("."===t)return this.addSpacer(null!=(r=this.format.radix)?r:".",null,"odometer-radix-mark");if(e)for(o=!1;;){if(!this.format.repeating.length){if(o)throw new Error("Bad odometer format without digits");this.resetFormat(),o=!0}if(n=this.format.repeating[this.format.repeating.length-1],this.format.repeating=this.format.repeating.substring(0,this.format.repeating.length-1),"d"===n)break;this.addSpacer(n)}return i=this.renderDigit(),i.querySelector(".odometer-value").innerHTML=t,this.digits.push(i),this.insertDigit(i)},t.prototype.animate=function(t){return f&&"count"!==this.options.animation?this.animateSlide(t):this.animateCount(t)},t.prototype.animateCount=function(t){var n,i,o,r,s,a=this;return(i=+t-this.value)?(r=o=M(),n=this.value,(s=function(){var u,d,l;return M()-r>a.options.duration?(a.value=t,a.render(),void S(a.el,"odometerdone")):(u=M()-o,u>e&&(o=M(),l=u/a.options.duration,d=i*l,n+=d,a.render(Math.round(n))),null!=x?x(s):setTimeout(s,e))})()):void 0},t.prototype.getDigitCount=function(){var t,e,n,i,o,r;for(i=1<=arguments.length?A.call(arguments,0):[],t=o=0,r=i.length;r>o;t=++o)n=i[t],i[t]=Math.abs(n);return e=Math.max.apply(Math,i),Math.ceil(Math.log(e+1)/Math.log(10))},t.prototype.getFractionalDigitCount=function(){var t,e,n,i,o,r,s;for(o=1<=arguments.length?A.call(arguments,0):[],e=/^\-?\d*\.(\d*?)0*$/,t=r=0,s=o.length;s>r;t=++r)i=o[t],o[t]=i.toString(),n=e.exec(o[t]),o[t]=null==n?0:n[1].length;return Math.max.apply(Math,o)},t.prototype.resetDigits=function(){return this.digits=[],this.ribbons=[],this.inside.innerHTML="",this.resetFormat()},t.prototype.animateSlide=function(t){var e,n,i,r,s,a,u,d,l,h,c,p,m,f,g,w,y,M,b,x,T,E,S,C,q,k,D;if(w=this.value,d=this.getFractionalDigitCount(w,t),d&&(t*=Math.pow(10,d),w*=Math.pow(10,d)),i=t-w){for(this.bindTransitionEnd(),r=this.getDigitCount(w,t),s=[],e=0,c=b=0;r>=0?r>b:b>r;c=r>=0?++b:--b){if(y=L(w/Math.pow(10,r-c-1)),u=L(t/Math.pow(10,r-c-1)),a=u-y,Math.abs(a)>this.MAX_VALUES){for(h=[],p=a/(this.MAX_VALUES+this.MAX_VALUES*e*o),n=y;a>0&&u>n||0>a&&n>u;)h.push(Math.round(n)),n+=p;h[h.length-1]!==u&&h.push(u),e++}else h=function(){D=[];for(var t=y;u>=y?u>=t:t>=u;u>=y?t++:t--)D.push(t);return D}.apply(this);for(c=x=0,E=h.length;E>x;c=++x)l=h[c],h[c]=Math.abs(l%10);s.push(h)}for(this.resetDigits(),k=s.reverse(),c=T=0,S=k.length;S>T;c=++T)for(h=k[c],this.digits[c]||this.addDigit(" ",c>=d),null==(M=this.ribbons)[c]&&(M[c]=this.digits[c].querySelector(".odometer-ribbon-inner")),this.ribbons[c].innerHTML="",0>i&&(h=h.reverse()),m=q=0,C=h.length;C>q;m=++q)l=h[m],g=document.createElement("div"),g.className="odometer-value",g.innerHTML=l,this.ribbons[c].appendChild(g),m===h.length-1&&v(g,"odometer-last-value"),0===m&&v(g,"odometer-first-value");return 0>y&&this.addDigit("-"),f=this.inside.querySelector(".odometer-radix-mark"),null!=f&&f.parent.removeChild(f),d?this.addSpacer(this.format.radix,this.digits[d-1],"odometer-radix-mark"):void 0}},t}(),c.options=null!=(D=window.odometerOptions)?D:{},setTimeout(function(){var t,e,n,i,o;if(window.odometerOptions){i=window.odometerOptions,o=[];for(t in i)e=i[t],o.push(null!=(n=c.options)[t]?(n=c.options)[t]:n[t]=e);return o}},0),c.init=function(){var t,e,n,i,o,r;if(null!=document.querySelectorAll){for(e=document.querySelectorAll(c.options.selector||".odometer"),r=[],n=0,i=e.length;i>n;n++)t=e[n],r.push(t.odometer=new c({el:t,value:null!=(o=t.innerText)?o:t.textContent}));return r}},null!=(null!=(I=document.documentElement)?I.doScroll:void 0)&&null!=document.createEventObject?(k=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&c.options.auto!==!1&&c.init(),null!=k?k.apply(this,arguments):void 0}):document.addEventListener("DOMContentLoaded",function(){return c.options.auto!==!1?c.init():void 0},!1),"function"==typeof define&&define.amd?define(["jquery"],function(){return c}):typeof exports===!1?module.exports=c:window.Odometer=c}.call(this);
|
|
</script>
|
|
<style>
|
|
#username,.count_live,body{font-family:Lato,sans-serif}#dp,#topnum,#username{position:absolute}body{outline:0;margin:0;overflow:hidden!important;-webkit-tap-highlight-color:transparent}.card{padding-top:2rem;text-align:center}.count_live{padding-top:10rem;font-size:15rem!important}#dp{height:17rem;left:5%;border-radius:40rem}#username{color:#e52d27;background-color:#fff;font-size:10rem;left:30%;text-align:left;border-radius:.5rem;box-shadow:0 0 20px -4px #000;padding:2rem 5rem}#topnum{width:100%;bottom:0}
|
|
/* Odometer */
|
|
.odometer.odometer-auto-theme,.odometer.odometer-auto-theme .odometer-digit,.odometer.odometer-theme-minimal,.odometer.odometer-theme-minimal .odometer-digit{display:inline-block;position:relative}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer{display:inline-block;visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner{text-align:left;display:block;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon{display:block}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner{display:block;-webkit-backface-visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-value,.odometer.odometer-theme-minimal .odometer-digit .odometer-value{display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,.odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value{position:absolute}.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner{-webkit-transition:-webkit-transform .5s;transition:transform .5s}.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner{-webkit-transition:-webkit-transform .5s;transition:transform .5s;-webkit-transform:translateY(0);transform:translateY(0)}
|
|
/*Font*/
|
|
@font-face{font-family:Lato;font-style:normal;font-weight:300;src:local('Lato Light'),local('Lato-Light'),url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="prime" class="card">
|
|
<img id="dp">
|
|
<div id="username"></div>
|
|
<div id="topnum">
|
|
<br>
|
|
<span class="count_live"></span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|