195 lines
34 KiB
HTML
195 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta name="fragment" content="!">
|
|
<link rel="canonical" href="https://youcount.github.io/" />
|
|
<title>YouCount: Youtube Live Subscriber Count</title>
|
|
<link rel="shortcut icon" href="favicon.ico"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="description" content="YouCount allows you to see the YouTube subscriber count of any YouTube Channel in realtime, along with the increasing/decreasing trend of subscribers and additional information about the YouTube Channel."/>
|
|
<meta property="og:title" content="YouTube Live Subscriber Count - YouCount"/>
|
|
<meta property="og:description" content="YouCount allows you to see the YouTube subscriber count of any YouTube Channel in realtime, along with the increasing/decreasing trend of subscribers and additional information about the YouTube Channel." />
|
|
<meta property="og:type" content="article"/>
|
|
<meta property="og:image" content="https://youcount.github.io/images/fblogo.jpg" />
|
|
<meta property="og:site_name" content="YouCount" />
|
|
<meta property="article:author" content="https://www.facebook.com/20manas"/>
|
|
<script>
|
|
//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 a,b,d,e,f,g,i,j;if(a=null!=(i=this.options.format)?i:c,a||(a="d"),d=h.exec(a),!d)throw new Error("Odometer: Unparsable digit format");return j=d.slice(1,4),g=j[0],f=j[1],b=j[2],e=(null!=b?b.length:void 0)||0,this.format={repeating:g,radix:f,precision:e}},a.prototype.render=function(a){var b,c,d,e,f,g,h,i,j,k,l,m;for(null==a&&(a=this.value),this.stopWatchingMutations(),this.resetFormat(),this.inside.innerHTML="",g=this.options.theme,b=this.el.className.split(" "),f=[],i=0,k=b.length;k>i;i++)c=b[i],c.length&&((e=/^odometer-theme-(.+)$/.exec(c))?g=e[1]:/^odometer(-|$)/.test(c)||f.push(c));for(f.push("odometer"),p||f.push("odometer-no-transitions"),f.push(g?"odometer-theme-"+g:"odometer-auto-theme"),this.el.className=f.join(" "),this.ribbons={},this.digits=[],h=!this.format.precision||!t(a)||!1,m=a.toString().split("").reverse(),j=0,l=m.length;l>j;j++)d=m[j],"."===d&&(h=!0),this.addDigit(d,h);return this.startWatchingMutations()},a.prototype.update=function(a){var b,c=this;return a=this.cleanValue(a),(b=a-this.value)?(v(this.el,"odometer-animating-up odometer-animating-down odometer-animating"),b>0?r(this.el,"odometer-animating-up"):r(this.el,"odometer-animating-down"),this.stopWatchingMutations(),this.animate(a),this.startWatchingMutations(),setTimeout(function(){return c.el.offsetHeight,r(c.el,"odometer-animating")},0),this.value=a):void 0},a.prototype.renderDigit=function(){return s(d)},a.prototype.insertDigit=function(a,b){return null!=b?this.inside.insertBefore(a,b):this.inside.children.length?this.inside.insertBefore(a,this.inside.children[0]):this.inside.appendChild(a)},a.prototype.addSpacer=function(a,b,c){var d;return d=s(g),d.innerHTML=a,c&&r(d,c),this.insertDigit(d,b)},a.prototype.addDigit=function(a,b){var c,d,e,f;if(null==b&&(b=!0),"-"===a)return this.addSpacer(a,null,"odometer-negation-mark");if("."===a)return this.addSpacer(null!=(f=this.format.radix)?f:".",null,"odometer-radix-mark");if(b)for(e=!1;;){if(!this.format.repeating.length){if(e)throw new Error("Bad odometer format without digits");this.resetFormat(),e=!0}if(c=this.format.repeating[this.format.repeating.length-1],this.format.repeating=this.format.repeating.substring(0,this.format.repeating.length-1),"d"===c)break;this.addSpacer(c)}return d=this.renderDigit(),d.querySelector(".odometer-value").innerHTML=a,this.digits.push(d),this.insertDigit(d)},a.prototype.animate=function(a){return p&&"count"!==this.options.animation?this.animateSlide(a):this.animateCount(a)},a.prototype.animateCount=function(a){var c,d,e,f,g,h=this;if(d=+a-this.value)return f=e=u(),c=this.value,(g=function(){var i,j,k;return u()-f>h.options.duration?(h.value=a,h.render(),void z(h.el,"odometerdone")):(i=u()-e,i>b&&(e=u(),k=i/h.options.duration,j=d*k,c+=j,h.render(Math.round(c))),null!=w?w(g):setTimeout(g,b))})()},a.prototype.getDigitCount=function(){var a,b,c,d,e,f;for(d=1<=arguments.length?G.call(arguments,0):[],a=e=0,f=d.length;f>e;a=++e)c=d[a],d[a]=Math.abs(c);return b=Math.max.apply(Math,d),Math.ceil(Math.log(b+1)/Math.log(10))},a.prototype.getFractionalDigitCount=function(){var a,b,c,d,e,f,g;for(e=1<=arguments.length?G.call(arguments,0):[],b=/^\-?\d*\.(\d*?)0*$/,a=f=0,g=e.length;g>f;a=++f)d=e[a],e[a]=d.toString(),c=b.exec(e[a]),e[a]=null==c?0:c[1].length;return Math.max.apply(Math,e)},a.prototype.resetDigits=function(){return this.digits=[],this.ribbons=[],this.inside.innerHTML="",this.resetFormat()},a.prototype.animateSlide=function(a){var b,c,d,f,g,h,i,j,k,l,m,n,o,p,q,s,t,u,v,w,x,y,z,B,C,D,E;if(s=this.value,j=this.getFractionalDigitCount(s,a),j&&(a*=Math.pow(10,j),s*=Math.pow(10,j)),d=a-s){for(this.bindTransitionEnd(),f=this.getDigitCount(s,a),g=[],b=0,m=v=0;f>=0?f>v:v>f;m=f>=0?++v:--v){if(t=A(s/Math.pow(10,f-m-1)),i=A(a/Math.pow(10,f-m-1)),h=i-t,Math.abs(h)>this.MAX_VALUES){for(l=[],n=h/(this.MAX_VALUES+this.MAX_VALUES*b*e),c=t;h>0&&i>c||0>h&&c>i;)l.push(Math.round(c)),c+=n;l[l.length-1]!==i&&l.push(i),b++}else l=function(){E=[];for(var a=t;i>=t?i>=a:a>=i;i>=t?a++:a--)E.push(a);return E}.apply(this);for(m=w=0,y=l.length;y>w;m=++w)k=l[m],l[m]=Math.abs(k%10);g.push(l)}for(this.resetDigits(),D=g.reverse(),m=x=0,z=D.length;z>x;m=++x)for(l=D[m],this.digits[m]||this.addDigit(" ",m>=j),null==(u=this.ribbons)[m]&&(u[m]=this.digits[m].querySelector(".odometer-ribbon-inner")),this.ribbons[m].innerHTML="",0>d&&(l=l.reverse()),o=C=0,B=l.length;B>C;o=++C)k=l[o],q=document.createElement("div"),q.className="odometer-value",q.innerHTML=k,this.ribbons[m].appendChild(q),o===l.length-1&&r(q,"odometer-last-value"),0===o&&r(q,"odometer-first-value");return 0>t&&this.addDigit("-"),p=this.inside.querySelector(".odometer-radix-mark"),null!=p&&p.parent.removeChild(p),j?this.addSpacer(this.format.radix,this.digits[j-1],"odometer-radix-mark"):void 0}},a}(),m.options=null!=(E=window.odometerOptions)?E:{},setTimeout(function(){var a,b,c,d,e;if(window.odometerOptions){d=window.odometerOptions,e=[];for(a in d)b=d[a],e.push(null!=(c=m.options)[a]?(c=m.options)[a]:c[a]=b);return e}},0),m.init=function(){var a,b,c,d,e,f;if(null!=document.querySelectorAll){for(b=document.querySelectorAll(m.options.selector||".odometer"),f=[],c=0,d=b.length;d>c;c++)a=b[c],f.push(a.odometer=new m({el:a,value:null!=(e=a.innerText)?e:a.textContent}));return f}},null!=(null!=(F=document.documentElement)?F.doScroll:void 0)&&null!=document.createEventObject?(D=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&m.options.auto!==!1&&m.init(),null!=D?D.apply(this,arguments):void 0}):document.addEventListener("DOMContentLoaded",function(){return m.options.auto!==!1?m.init():void 0},!1),"function"==typeof define&&define.amd?define(["jquery"],function(){return m}):typeof exports===!1?module.exports=m:window.Odometer=m}).call(this);
|
|
//Odometer End
|
|
|
|
function loadfunc(){window.Velocity||rudi.getScript("https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js",0,0,function(){rudi.getScript("js/script.js")})}var username,rawInput,isChart=0,intervalId,rudi={keyIndex:0,getKey:function(){var e=["AIzaSyBAb4nM48dVlty7LPHm_qrcWrhlQ1P205U"];return++rudi.keyIndex,rudi.keyIndex==e.length&&(rudi.keyIndex=0),e[rudi.keyIndex]},getText:function(e,t){var n=new XMLHttpRequest;n.onreadystatechange=function(){4==n.readyState&&200==n.status&&t(JSON.parse(n.responseText))},n.open("GET",e),n.send()},changeText:function(e,t){"form"in e?e.value=t:e.textContent=t},getScript:function(e,t,n,o){var i=document.createElement("script"),a=document.getElementsByTagName("script")[0];if(i.async=1,a.parentNode.insertBefore(i,a),i.onload=i.onreadystatechange=function(e,t){(t||!i.readyState||/loaded|complete/.test(i.readyState))&&(i.onload=i.onreadystatechange=null,i=void 0,t||o&&o())},i.src=e,t&&n)for(var r=0;r<t.length;r++)i[t[r]]=n[r]},getUsername:function(){var e=["PewDiePie","Smosh","MarquesBrownlee","markiplierGAME","KSIOlajidebt","TheFineBros","JennaMarbles","nigahiga","Vsauce"];rawInput=e[Math.floor(Math.random()*e.length)]}},input={notFound:0,receive:function(e){var t=document.getElementById("username").value;t&&t.trim()&&t.trim()!=refresh.channelName&&"Not Found!"!=t.trim()&&"Loading..."!=t.trim()&&(rudi.changeText(document.getElementById("username"),"Loading..."),document.getElementById("username").blur(),rawInput=t.trim(),e&&e())},check:function(e,t){rudi.getText("https://www.googleapis.com/youtube/v3/search?part=snippet&q="+encodeURIComponent(rawInput)+"&type=channel&maxResults=1&key="+rudi.getKey(),function(n){if(n.pageInfo.totalResults<1){clearInterval(intervalId),document.getElementById("actualCount").style.display="none",document.getElementById("milestoneBox").style.display="none",document.getElementById("dp").style.display="none";for(var o=["totalViews","totalVideos","pubDate","username"],i=0;i<o.length;i++)rudi.changeText(document.getElementById(o[i]),"Not Found!");input.notFound=1,t&&t()}else 1===input.notFound&&(document.getElementById("actualCount").style.display="inline-block");document.getElementById("milestoneBox").style.display="inline",document.getElementById("dp").style.display="block",intervalId=setInterval(live.all,1e3),e&&e(n.items[0].snippet)})}},refresh={channelName:void 0,popstatevar:1,title:function(e){refresh.channelName=e.title,document.title=refresh.channelName+"'s YouTube Live Subscriber Count - YouCount",rudi.changeText(document.querySelector("#username"),refresh.channelName)},date:function(e){var t=e.publishedAt.split("T")[0];t=t.split("-"),"01"==t[1]?t[1]="Jan":"02"==t[1]?t[1]="Feb":"03"==t[1]?t[1]="Mar":"04"==t[1]?t[1]="Apr":"05"==t[1]?t[1]="May":"06"==t[1]?t[1]="Jun":"07"==t[1]?t[1]="Jul":"08"==t[1]?t[1]="Aug":"09"==t[1]?t[1]="Sep":"10"==t[1]?t[1]="Oct":"11"==t[1]?t[1]="Nov":"12"==t[1]&&(t[1]="Dec"),rudi.changeText(document.getElementById("pubDate"),t[2]+"-"+t[1]+"-"+t[0])},picture:function(e){document.getElementById("dp").src=e.thumbnails["default"].url},URL:function(){if(1==refresh.popstatevar){var e,t,n="https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+username+"&fields=items/snippet&key="+rudi.getKey();rudi.getText(n,function(n){e=n.items[0].snippet.customUrl?n.items[0].snippet.customUrl.trim():refresh.channelName.trim().replace(/\s+/g,"+");var o="https://www.googleapis.com/youtube/v3/search?part=snippet&q="+encodeURIComponent(e)+"&type=channel&maxResults=1&key="+rudi.getKey();rudi.getText(o,function(n){t=n.pageInfo.totalResults<1||n.items[0].snippet.channelId.trim()!=username?username:e,history.pushState(null,null,"#!/"+t),rudi.changeText(document.getElementById("embedUrl"),'<iframe src="https://youcount.github.io/e/#!/'+t+'" height="100" width="250" frameborder="0"></iframe>'),rudi.changeText(document.querySelector("#pageUrl input"),"https://youcount.github.io/#!/"+t)})})}refresh.popstatevar=1},stats:function(){var e="https://www.googleapis.com/youtube/v3/channels?part=statistics&id="+username+"&fields=items/statistics&key="+rudi.getKey();rudi.getText(e,function(e){rudi.changeText(document.getElementById("totalVideos"),e.items[0].statistics.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")),rudi.changeText(document.getElementById("totalViews"),e.items[0].statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g,","))})},all:function(e){e||rudi.getText("https://www.googleapis.com/youtube/v3/search?part=snippet&q="+encodeURIComponent(rawInput)+"&type=channel&maxResults=1&key="+rudi.getKey(),function(t){e=t.items[0].snippet}),e.channelId&&(username=e.channelId.trim()),2===isChart&&(isChart=1),refresh.title(e),live.all(),refresh.date(e),refresh.picture(e),refresh.URL(),refresh.stats()}},live={prevCount:void 0,actualCount:0,isLive:0,seconds:0,data:void 0,ctx:void 0,myLineChart:void 0,count:function(){live.prevCount=live.actualCount;var e="https://www.googleapis.com/youtube/v3/channels?part=statistics&id="+username+"&fields=items/statistics/subscriberCount&key="+rudi.getKey();rudi.getText(e,function(e){live.actualCount=e.items[0].statistics.subscriberCount}),live.isLive?rudi.changeText(document.getElementById("actualCount"),live.actualCount):new Odometer({el:document.getElementById("actualCount"),value:live.actualCount,format:"(,ddd)",theme:"minimal"})},milestones:function(){for(var e=0,t=[10,25,50,100,500,1e3,2500,5e3,1e4,25e3,5e4,1e5,25e4,5e5,1e6,2e6,3e6,4e6,5e6,6e6,7e6,1e7,15e6,2e7,25e6,3e7,4e7,5e7,7e7,1e8,15e7,2e8,3e8],n=0;n<t.length;n++)if(live.actualCount<=t[n]){e=t[n];break}var o=e-live.actualCount;live.isLive?rudi.changeText(document.getElementById("milestoneLeft"),o):new Odometer({el:document.getElementById("milestoneLeft"),value:o,format:"(,ddd)",theme:"minimal"}),rudi.changeText(document.getElementById("milestoneTarget"),e.toLocaleString("en-US"))},chart:function(){1===isChart?(live.data={labels:[""],datasets:[{fillColor:"rgba(0,0,0,0)",strokeColor:"rgba(229,45,39,0.5)",pointColor:"rgba(229,45,39,1)",data:[live.actualCount]}]},live.ctx=document.getElementById("myChart").getContext("2d"),live.myLineChart=new Chart(live.ctx).Line(live.data,{scaleShowGridLines:!1,pointDot:!1,responsive:!0,maintainAspectRatio:!1}),isChart=2,live.seconds=0):2===isChart&&(live.myLineChart.addData([live.actualCount],""),live.seconds>=30&&live.myLineChart.removeData())},color:function(){var e=live.actualCount-live.prevCount;e>0?document.body.style.backgroundColor="rgb(240,255,240)":0===e?document.body.style.backgroundColor="rgb(250,250,250)":document.body.style.backgroundColor="rgb(255,240,240)"},all:function(){++live.seconds,live.count(),live.milestones(),live.color(),live.chart(),live.isLive=1}},start={checkFrame:function(){return window.top==window.self&&window.top.location==window.self.location&&"youcount.github.io"==window.location.hostname&&"youcount.github.io"==window.top.location.hostname?!0:void(window.top.location=window.self.location)},checkProtocol:function(){if("https:"==window.location.protocol)return!0;try{window.location.protocol="https:"}catch(e){window.location.protocol="https"}},process:function(){start.checkFrame()&&start.checkProtocol()&&(location.hash.split("#!/")[1]?rawInput=location.hash.split("#!/")[1].trim():"/"!=window.location.pathname?rawInput=window.location.pathname:rudi.getUsername(),input.check(refresh.all),loadfunc(),intervalId=setInterval(live.all,1e3))}};start.process(),window.onpopstate=function(){refresh.popstatevar=0,location.hash.split("#!/")[1]&&(rawInput=location.hash.split("#!/")[1].trim(),rudi.changeText(document.querySelector("#username"),"Loading..."),input.check(refresh.all))};
|
|
</script>
|
|
<style>
|
|
/* 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)}
|
|
/*Odometer End*/
|
|
|
|
#buttonBig,#menu{min-height:50px;left:0;top:0}#logo,#logo2{width:auto;left:50%;cursor:pointer}#sharebox li,#suggest,ul{list-style-type:none}#buttonBig,#logo2,#pageUrl,#sharebox{position:fixed}#buttonSmall,#contents,#logo,#menu{position:absolute}#contents,#logo2,#pageUrl,#sharebox li{display:none}#contents a,a{text-decoration:none}#about,#bg1,#buttonBig hr,#embed,#help,#pageUrl{background-color:#fff}#bg2,#menu{z-index:1001}#about,#embed,#extra,#help,#mainPage,#username,.card{text-align:center}#menu,#pageUrl,.card{box-shadow:0 0 20px -4px #000}#pageUrl input,#username,body{font-family:Lato,sans-serif}#buttonBig,#dp,#input button,#logo,#logo2,#shareLi,.share,.suggest{cursor:pointer}body{background-color:#fafafa;outline:0;margin:0;-webkit-tap-highlight-color:transparent;transition:background-color .5s linear}img{color:transparent}#menu{width:100%;height:30%;background-color:#e52d27}#buttonBig{height:10%;z-index:2;min-width:2%;width:80px}#buttonBig hr{width:20px;height:2px;border-radius:2px;border:0;margin:5px}#buttonSmall{left:25px;top:50%;transition:all .5s;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}#logo{height:15vmin;bottom:10%;top:auto;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#logo2{height:8%;min-height:40px;top:1%;bottom:auto;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#sharebox{right:0;top:0;width:10vh;height:10vh;font-size:2vh}#sharebox li{margin-left:1.5vh}.share{min-height:30px;height:7vh;width:7vh;border-radius:7vh}#contents,#mainPage,.bg{width:100%;left:0}#shareLi{display:block!important;margin-left:0!important;padding:1.5vh}#pageUrl,#pageUrl input{text-align:center;width:80%;left:10%;border-radius:4px}#pageUrl{top:20%;z-index:1010;padding-top:30px;font-size:25px}#pageUrl input{border:none;outline:0;font-size:30px;padding:10px;background-color:gray;color:#fff;margin:20px}#contents{top:10%;z-index:502;color:gray;overflow-x:hidden;overflow-y:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}#charts,#extra,#input button,.chartbutton{overflow:hidden}#menuAbout,#menuEmbed,#menuHelp{display:block;font-size:40px;font-weight:300;font-family:Lato,sans-serif;left:-40px;position:relative;padding-left:20px;padding-top:10px;padding-bottom:10px;cursor:pointer;transition:all .5s}#charts,#hidechart,#input button,#suggest,.bg{display:none}#contents hr{left:-40px;position:relative;height:2px;outline:0;border:0;background-color:rgba(0,0,0,.1)}#contents a{color:#e52d27;padding:10px;font-weight:900}#about,#embed,#help{display:none;color:#000;left:10%;padding:10px;border-left:.5vw solid #e52d27}#about h1,#embed h1,#help h1{font-size:10vw;margin:0}#about li,#about p,#embed li,#embed p,#help li,#help p{font-size:25px;text-align:left}#instruct{width:75%}#embedUrl{font-size:20px}.bg{top:0;height:100%;position:fixed}#bg1{z-index:501}#bg2{background-color:rgba(0,0,0,.5)}#mainPage{position:absolute;bottom:0;top:30%;margin-left:auto;margin-right:auto}.card{position:relative;width:80%!important;height:35vw;top:0!important;margin:2vw auto;padding-top:2vw;font-size:1vw;border-radius:4px;background-color:#fff}#dp,#input{height:8vw;position:absolute}#prime{height:30vw}#actualCount{font-size:8vw!important}#pubDate,#totalVideos,#totalViews{font-size:3vw!important;line-height:1;font-weight:400}#dp{left:5%;border-radius:8vw}#input button,#username{border:none;outline:0;color:#fff}#input{right:5%;width:75%;background-color:rgba(0,0,0,.3);transition:background-color .25s;border-radius:.5vw}#input button{height:100%;background-color:#e52d27;right:0;width:8vw;position:absolute}#username{font-size:4vw;float:left;height:100%;width:100%;background-color:transparent;transition:width .25s}#search{height:60%;left:20%}.bar:after,.bar:before{content:'';height:.5vw;width:0;bottom:0;position:absolute;background:#e52d27;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}input:focus~.bar:after,input:focus~.bar:before{width:50%}#username:focus{width:87%}#suggest{position:absolute;left:0;top:8vw;z-index:400;width:100%;box-shadow:0 4px 10px -4px #000;padding:0;margin:0;background-color:#fff}.suggest{color:#000;height:50px;padding-bottom:10px;padding-top:10px}.suggest div{font-size:2.5vw;position:relative;margin-left:10px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.suggest:hover{background-color:#e52d27;color:#fff}.suggestImg{float:left;width:50px;height:50px;border-radius:50%;margin-left:10px}#arrowCircle,#extra{width:4vw;height:4vw;border-radius:5vw}#arrowCircle,#extra,#hidechart,#myChart-wrapper{margin-left:auto;margin-right:auto}#topnum{width:100%;top:12vw;position:absolute}#extra{font-weight:400;position:relative;top:0;-webkit-transform:translateY(-4vw);transform:translateY(-4vw);font-size:1vw;background-color:#fff}#arrowCircle,.chartbutton{background-color:#e52d27;cursor:pointer}.extra{padding-top:2vw;box-shadow:0 0 20px -4px #000}#arrowCircle{-webkit-transition:-webkit-transform .5s;-webkit-transition:transform .5s;transition:transform .5s}#arrow{box-shadow:.3vw .3vw #fff;height:1.05vw;width:1.05vw;margin:auto;-webkit-transform:rotateZ(45deg) translate(60%,60%);transform:rotateZ(45deg) translate(60%,60%)}#extraContent{opacity:0;margin-bottom:5vw}#extra table{border-collapse:collapse;font-size:2vw;font-weight:100}#extra td,#extra th{text-align:left;vertical-align:center;border-bottom:1px solid #ddd;padding:10px 2vw}#milestoneBox{font-size:3vw;font-weight:100}#myChart-wrapper{width:80%;height:30vh}#charts{height:15vh}#showchart{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute}.chartbutton{border:none;outline:0;color:#fff;height:6vh;width:15vw;border-radius:4px;font-weight:900;z-index:2}@media only screen and (max-width:800px),screen and (orientation:portrait){#instruct{width:95%}.card{width:98%!important;font-size:3vw;height:88vw}#extra table{font-size:5vw}#milestoneBox{font-size:8vw}#actualCount{font-size:15vw!important}#pubDate,#totalVideos,#totalViews{font-size:8vw!important}#prime{height:40vw!important}#username:focus{width:84%}#arrowCircle,#extra{width:10vw;height:10vw}#arrow{box-shadow:.75vw .75vw #fff;height:2.625vw;width:2.625vw}#username{font-size:6vw}#dp,#input{height:12vw}#suggest{top:12vw}#input button{width:12vw}#topnum{top:14vw}.chartbutton{height:8vh;width:35vw}#myChart-wrapper{width:95%}#charts{display:none!important}}@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}@font-face{font-family:Lato;font-style:normal;font-weight:400;src:local('Lato Regular'),local('Lato-Regular'),url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.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>
|
|
<section id="menu">
|
|
<div id="buttonBig">
|
|
<div id="buttonSmall">
|
|
<hr id="hr1"><hr id="hr2"><hr id="hr3">
|
|
</div>
|
|
</div>
|
|
|
|
<img id="logo" alt="YouCount Logo">
|
|
<img id="logo2" alt="YouCount Icon">
|
|
|
|
<div id="sharebox">
|
|
<li id="shareLi"><img id="share" class="share" alt="Share Icon"></li><br>
|
|
<li><img id="fb" class="share" alt="Facebook Icon"></li><br>
|
|
<li><img id="tw" class="share" alt="Twitter Icon"></li><br>
|
|
<li><img id="lnkdIn" class="share" alt="LinkedIn Icon"></li><br>
|
|
<li><img id="tb" class="share" alt="Tumblr Icon"></li><br>
|
|
<li><img id="rdit" class="share" alt="Reddit Icon"></li><br>
|
|
<li><img id="link" class="share" alt="Link Icon"></li>
|
|
</div>
|
|
</section>
|
|
|
|
<span id="pageUrl">
|
|
Select and copy the URL of this page below and use it to share this page anywhere!
|
|
<br><input type="text" value="" onclick="this.select()" readonly />
|
|
</span>
|
|
|
|
<section id="contents">
|
|
<ul>
|
|
<li id="menuHelp" class="help">Help Me!</li><br>
|
|
<article id="help">
|
|
<span class="bar2"></span>
|
|
<h1>HOW TO USE!</h1>
|
|
<p>Click on the grey searchbox on top and write the Username/ID/YouTube Channel Name/Youtube URL (all of them work!)
|
|
of any YouTube channel of your choice and press Enter or the search button. In a way, this is a search engine for YouTube Channels
|
|
which shows you the YouTube subscriber count of the most relevant match of your query, so any keywords related to the YouTube channel
|
|
can be entered in the search query.</p>
|
|
<img id="instruct" alt="The searchbox is the grey area which when clicked becomes red with a search button appearing on the right. The profile image of YouTube Channel can also be clicked to trigger searchbox.">
|
|
<p>For example, to see Fine Brothers Entertainment's live YouTube subscriber count, click on
|
|
the grey area and type in any one of these:
|
|
<ul>
|
|
<li>1. <b>TheFineBros</b> (their username)</li><br>
|
|
<li>2. <b>Fine Brothers Entertainment</b> (their YouTube channel name)</li><br>
|
|
<li>3. <b>fine bros</b> (a search query)</li><br>
|
|
</ul>
|
|
</p>
|
|
<p>All of the above queries show the realtime YouTube subscriber count of the Fine Brothers Entertainment's YouTube channel.</p>
|
|
<p>The YouTube subscriber count is updated every second!</p>
|
|
<p>You can also click on the red arrow button to see other useful information related to the YouTube channel
|
|
like the total views and of the YouTube channel, the total videos uploaded by the YouTube channel and how far the YouTube channel is from
|
|
it's subscriber milestone!</p>
|
|
<p>Further, you can see the graphical representation of the increasing/decreasing YouTube subscriber count of the YouTube channel by
|
|
clicking on the "Show Trend" button.</p>
|
|
</article>
|
|
<hr>
|
|
<li id="menuAbout" class="about">About YouCount</li><br>
|
|
<article id="about">
|
|
<span class="bar2"></span>
|
|
<h1>WHAT IS YOUCOUNT?</h1>
|
|
<p>YouCount allows you to see the YouTube subscriber count of any YouTube Channel in realtime.
|
|
Youtube doesn't allow you to see the subscriber count in realtime.
|
|
But on YouCount, the YouTube subscriber count is updated every second!</p>
|
|
<p>There are other websites that allow you to do this as well,
|
|
but most of them are either badly designed and/or are not optimized for mobile devices.</p>
|
|
<p>YouCount has been specifically designed using the Material Design language to make it look awesome!</p>
|
|
<p>It is also optimized for mobile devices and has been made to work even with older browsers.</p>
|
|
<p>To know more or to get in contact:
|
|
<ul>
|
|
<li>1. <a href="//github.com/YouCount/youcount.github.io">Visit our GitHub Project site</a></li>
|
|
<li>2. Send an Email: <a id="email"></a></li>
|
|
</ul>
|
|
</p>
|
|
<p>Support the website by sharing it with your friends!</p>
|
|
</article>
|
|
<hr>
|
|
<li id="menuEmbed" class="embed">Embed this!</li><br>
|
|
<article id="embed">
|
|
<span class="bar2"></span>
|
|
<h1>EMBED THIS!</h1>
|
|
<p>
|
|
Copy the code below and paste it where you want to embed this:
|
|
</p>
|
|
<code id="embedUrl"></code>
|
|
<p>
|
|
Adjust it's size by changing the "height" and "width" attribute of the iframe.
|
|
The size will automatically adjust to the size of the iframe.
|
|
</p>
|
|
</article>
|
|
<hr>
|
|
</ul>
|
|
</section>
|
|
|
|
<div class="bg" id="bg1"></div><div class="bg" id="bg2"></div>
|
|
|
|
<div id="mainPage">
|
|
<section id="prime" class="card">
|
|
<label for="username">
|
|
<img id="dp" alt="Channel Image">
|
|
</label>
|
|
<div id="input">
|
|
<input type="text" id="username" value="Loading..." onkeypress="trigenter(event)"/>
|
|
<button id="inputButton">
|
|
<img id="search" alt="Search Button to process the query">
|
|
</button>
|
|
<span class="bar"></span>
|
|
<ul id="suggest">
|
|
<li class="suggest" id="suggest1"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="topnum">
|
|
<br>
|
|
<span id="actualCount">Loading...</span>
|
|
<br>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="extra">
|
|
<div id="arrowCircle">
|
|
<div id="arrow"></div>
|
|
</div>
|
|
<br><br>
|
|
<div id="extraContent">
|
|
<span class="milestones" id="milestoneBox">
|
|
<span id="milestoneLeft">Loading...</span> left from <span id="milestoneTarget">Loading...</span>!
|
|
</span>
|
|
<br><br><br>
|
|
<table style="margin-left: auto; margin-right: auto; text-align: center;">
|
|
<tr>
|
|
<td>Total Views:</td>
|
|
<td><span id="totalViews">Loading...</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Total Videos:</td>
|
|
<td><span id="totalVideos">Loading...</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Since:</td>
|
|
<td><span id="pubDate">Loading...</span></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<section id="charts" class="card">
|
|
<button class="chartbutton" id="showchart">SHOW TREND</button>
|
|
<div id="myChart-wrapper">
|
|
<canvas width="400" height="200" id="myChart"></canvas>
|
|
</div>
|
|
<button class="chartbutton" id="hidechart">HIDE TREND</button>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-25460437-7', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html> |