2016-06-30 01:05:05 -07:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="robots" content="noindex">
|
|
|
|
|
<script>
|
2017-04-06 13:29:02 -07:00
|
|
|
var APIkeys = ["AIzaSyBPsCt-UTntWemt0P3590TAZ883eh0Q3r0"];
|
2017-08-25 16:23:19 -07:00
|
|
|
var te = location.hash.split("#!/")[1];
|
|
|
|
|
var rawInput = te.trim();
|
|
|
|
|
window.addEventListener("click",function(){window.open("https://youcount.github.io/#!/"+encodeURIComponent(rawInput), '_blank')});
|
|
|
|
|
var keyIndex = 0,username;
|
|
|
|
|
function getText(url, callback) {
|
|
|
|
|
var request = new XMLHttpRequest();
|
|
|
|
|
request.onreadystatechange = function() {
|
|
|
|
|
if(request.readyState == 4) {
|
|
|
|
|
if(request.status == 200) {
|
|
|
|
|
callback(JSON.parse(request.responseText));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
request.open('GET', url);
|
|
|
|
|
request.send();
|
|
|
|
|
}
|
|
|
|
|
function queryName(){
|
|
|
|
|
getText("https://www.googleapis.com/youtube/v3/search?part=snippet&q="+encodeURIComponent(rawInput)+"&type=channel&fields="+encodeURIComponent("pageInfo(totalResults),items(snippet(title,channelId,thumbnails(default(url))))")+"&maxResults=1&key=" + getKey(), function(e){
|
|
|
|
|
if(e.pageInfo.totalResults < 1) {
|
|
|
|
|
document.querySelector("#username").textContent = "Not Found!";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
document.getElementById("dp").src=e.items[0].snippet.thumbnails.default.url;
|
|
|
|
|
document.querySelector("#username").textContent = e.items[0].snippet.title;
|
|
|
|
|
username = e.items[0].snippet.channelId.trim();
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
var isLive = 0,counts = [[]],intervals = [[2000],[3000],[5000],[10000],[30000],[120000]],recursions = [[7],[5],[3],[3],[4],[1]],r=0,level=1;
|
|
|
|
|
for(var q=0;q<15;q++)counts[q]=0;
|
|
|
|
|
function checkInt(count) {
|
|
|
|
|
if(counts[recursions[level]-2]!=0&&counts[0]==count)++level;
|
|
|
|
|
else if(counts[0]!=count&&counts[0]!=0&&level!=0)--level;
|
|
|
|
|
else {counts[r] = count; r++; return;}
|
|
|
|
|
|
|
|
|
|
if(level==6){
|
|
|
|
|
clearInterval(inter);
|
|
|
|
|
document.getElementById("count_live").style.display="none";
|
|
|
|
|
document.getElementById("paused").style.display="block";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
clearInterval(inter);
|
|
|
|
|
inter = setInterval(live, intervals[level]);
|
|
|
|
|
for(var q=0;q<15;q++)counts[q]=0;
|
|
|
|
|
r=0;
|
|
|
|
|
}
|
|
|
|
|
function live() {
|
|
|
|
|
var reqType = (username.length>=24 && username.substr(0, 2).toUpperCase() == "UC")?"id":"forUsername";
|
|
|
|
|
var url = "https://www.googleapis.com/youtube/v3/channels?part=statistics&"+reqType+"="+username+"&fields=items/statistics/subscriberCount&key=" + getKey();
|
|
|
|
|
getText(url, function(e) {
|
|
|
|
|
if(!username) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var sub_count = e.items[0].statistics.subscriberCount;
|
|
|
|
|
if(!isLive) {
|
|
|
|
|
new Odometer({
|
|
|
|
|
el: document.getElementById("count_live"),
|
|
|
|
|
value: sub_count,
|
|
|
|
|
format: '(,ddd)',
|
|
|
|
|
theme: 'minimal'
|
|
|
|
|
});
|
|
|
|
|
isLive = 1;
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("count_live").textContent = sub_count;
|
|
|
|
|
}
|
|
|
|
|
checkInt(sub_count);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function getKey() {
|
|
|
|
|
++keyIndex;
|
|
|
|
|
if(keyIndex==APIkeys.length)keyIndex=0;
|
|
|
|
|
return APIkeys[keyIndex];
|
|
|
|
|
}
|
|
|
|
|
var inter;
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
queryName();
|
|
|
|
|
inter = setInterval(live, intervals[level]);
|
|
|
|
|
};
|
|
|
|
|
function remsize() {
|
|
|
|
|
var root = document.querySelector(":root");
|
|
|
|
|
root.style.fontSize = (window.innerWidth)/100;
|
|
|
|
|
}
|
|
|
|
|
remsize();
|
|
|
|
|
window.addEventListener("resize", remsize, false);
|
|
|
|
|
//Odometer
|
|
|
|
|
(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G=[].slice;q='<span class="odometer-value"></span>',n='<span class="odometer-ribbon"><span class="odometer-ribbon-inner">'+q+"</span></span>",d='<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">'+n+"</span></span>",g='<span class="odometer-formatting-mark"></span>',c="(,ddd).dd",h=/^\(?([^)]*)\)?(?:(.)(d+))?$/,i=30,f=2e3,a=20,j=2,e=.5,k=1e3/i,b=1e3/a,o="transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",y=document.createElement("div").style,p=null!=y.transition||null!=y.webkitTransition||null!=y.mozTransition||null!=y.oTransition,w=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,l=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,s=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},v=function(a,b){return a.className=a.className.replace(new RegExp("(^| )"+b.split(" ").join("|")+"( |$)","gi")," ")},r=function(a,b){return v(a,b),a.className+=" "+b},z=function(a,b){var c;return null!=document.createEvent?(c=document.createEvent("HTMLEvents"),c.initEvent(b,!0,!0),a.dispatchEvent(c)):void 0},u=function(){var a,b;return null!=(a=null!=(b=window.performance)?"function"==typeof b.now?b.now():void 0:void 0)?a:+new Date},x=function(a,b){return null==b&&(b=0),b?(a*=Math.pow(10,b),a+=.5,a=Math.floor(a),a/=Math.pow(10,b)):Math.round(a)},A=function(a){return 0>a?Math.ceil(a):Math.floor(a)},t=function(a){return a-x(a)},C=!1,(B=function(){var a,b,c,d,e;if(!C&&null!=window.jQuery){for(C=!0,d=["html","text"],e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(function(a){var b;return b=window.jQuery.fn[a],window.jQuery.fn[a]=function(a){var c;return null==a||null==(null!=(c=this[0])?c.odometer:void 0)?b.apply(this,arguments):this[0].odometer.update(a)}}(a));return e}})(),setTimeout(B,0),m=function(){function a(b){var c,d,e,g,h,i,l,m,n,o,p=this;if(this.options=b,this.el=this.options.el,null!=this.el.odometer)return this.el.odometer;this.el.odometer=this,m=a.options;for(d in m)g=m[d],null==this.options[d]&&(this.options[d]=g);null==(h=this.options).duration&&(h.duration=f),this.MAX_VALUES=this.options.duration/k/j|0,this.resetFormat(),this.value=this.cleanValue(null!=(n=this.options.value)?n:""),this.renderInside(),this.render();try{for(o=["innerHTML","innerText","textContent"],i=0,l=o.length;l>i;i++)e=o[i],null!=this.el[e]&&!function(a){return Object.defineProperty(p.el,a,{get:function(){var b;return"innerHTML"===a?p.inside.outerHTML:null!=(b=p.inside.innerText)?b:p.inside.textContent},set:function(a){return p.update(a)}})}(e)}catch(q){c=q,this.watchForMutations()}}return a.prototype.renderInside=function(){return this.inside=document.createElement("div"),this.inside.className="odometer-inside",this.el.innerHTML="",this.el.appendChild(this.inside)},a.prototype.watchForMutations=function(){var a,b=this;if(null!=l)try{return null==this.observer&&(this.observer=new l(function(){var a;return a=b.el.innerText,b.renderInside(),b.render(b.value),b.update(a)})),this.watchMutations=!0,this.startWatchingMutations()}catch(c){a=c}},a.prototype.startWatchingMutations=function(){return this.watchMutations?this.observer.observe(this.el,{childList:!0}):void 0},a.prototype.stopWatchingMutations=function(){var a;return null!=(a=this.observer)?a.disconnect():void 0},a.prototype.cleanValue=function(a){var b;return"string"==typeof a&&(a=a.replace(null!=(b=this.format.radix)?b:".","<radix>"),a=a.replace(/[.,]/g,""),a=a.replace("<radix>","."),a=parseFloat(a,10)||0),x(a,this.format.precision)},a.prototype.bindTransitionEnd=function(){var a,b,c,d,e,f,g=this;if(!this.transitionEndBound){for(this.transitionEndBound=!0,b=!1,e=o.split(" "),f=[],c=0,d=e.length;d>c;c++)a=e[c],f.push(this.el.addEventListener(a,function(){return b?!0:(b=!0,setTimeout(function(){return g.render(),b=!1,z(g.el,"odometerdone")},0),!0)},!1));return f}},a.prototype.resetFormat=function(){var
|
|
|
|
|
//Odometer End
|
2016-06-30 01:05:05 -07:00
|
|
|
</script>
|
|
|
|
|
<style>
|
2017-04-06 13:29:02 -07:00
|
|
|
#paused{display:none}#username,.count_live,body{cursor:pointer;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}
|
2016-06-30 01:05:05 -07:00
|
|
|
/* 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>
|
2017-04-06 13:29:02 -07:00
|
|
|
<span id="count_live" class="count_live"></span>
|
|
|
|
|
<span id="paused" class="count_live">Paused</span>
|
2016-06-30 01:05:05 -07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
