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
|
||
|
|
</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>
|