210 lines
38 KiB
HTML
210 lines
38 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>YouCount: YouTube® LIVE Subscriber Count</title>
|
|
<meta name="theme-color" content="#e61919" />
|
|
<link rel="shortcut icon" href="/favicon.ico"/>
|
|
<link rel="canonical" href="https://youcount.github.io/" />
|
|
<link rel="amphtml" href="https://youcount.github.io/amp">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="EXPIRES" content="Thu, 10 Jan 2030 12:00:00 GMT">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="See the live growth of any YouTube channel through their subcriber count updated in realtime. See collected insights about your favorite YouTubers. Add subscriber counts to your own website."/>
|
|
<meta property="og:title" content="YouCount: YouTube® LIVE Subscriber Count"/>
|
|
<meta property="og:description" content="See the live growth of any YouTube channel through their subcriber count updated in realtime. See collected insights about your favorite YouTubers. Add subscriber counts to your own website." />
|
|
<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 type="application/ld+json">
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "Article",
|
|
"headline": "YouCount: YouTube® LIVE Subscriber Count",
|
|
"datePublished": "2015-10-07T12:02:41Z",
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name":"YouCount",
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"url": "https://youcount.github.io/images/amplogo.jpg",
|
|
"width": 600,
|
|
"height": 60
|
|
}
|
|
},
|
|
"author":"Manas Khurana",
|
|
"image": {
|
|
"@type": "ImageObject",
|
|
"url": "https://youcount.github.io/images/fblogo.jpg",
|
|
"width": 1203,
|
|
"height": 630
|
|
},
|
|
"description":"See the live growth of any YouTube channel through their subcriber count updated in realtime. See collected insights about your favorite YouTubers. Add subscriber counts to your own website."
|
|
}
|
|
</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;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*/
|
|
#input button,.navButtonsCover{float:right;position:relative;cursor:pointer}#sharebox,#suggest,ul{list-style-type:none}#pageUrl input,body{font-family:Arial,sans-serif;outline:0}#pointer,#tutorial{left:50%;z-index:1003}#tutStep1,#tutStep2{margin-left:15px;margin-right:15px}#bg1,body{overflow-x:hidden}#bg1 div,#pageUrl,#tutStep2,#tutorial,.share{display:none}#bg2,#menu{z-index:1001}#menu,#pageUrl,.card{box-shadow:0 0 20px -4px #000}#bottomPrime,#input,#input button,#topPrime,.card,.navButtonsCover,.suggest div{position:relative}#dp,#input button,.extrabutton,.share,.suggest{cursor:pointer}#search,.navButtonsCover .navButtons{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd0AAABGCAMAAAC+Nb5oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0Nzk5OWVkZC01ZWUyLWU3NGMtYjQzOC1jYjEzNDk5MWUyNGYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkM2MTYxMTk4OEZCMTFFN0E0RkY5QTAwNkRCMTYzMzIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkM2MTYxMTg4OEZCMTFFN0E0RkY5QTAwNkRCMTYzMzIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDY0NUZGRUY4Njc1MTFFN0I5MTdEQTcwMDU2Q0NCMzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDY0NUZGRjA4Njc1MTFFN0I5MTdEQTcwMDU2Q0NCMzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5g/RDXAAAACVBMVEX////lLScAAAA8bF9eAAAAA3RSTlP//wDXyg1BAAAEe0lEQVR42uzd2XIbIRAF0Kv+/49OVapScawBerm9iHjeLEuzcAZoGkaCnDacN2Ft7P0N2PiFZDm4VVK7+YvhJuLmK0IKrf1qctuECbYd14M0W8vl5Lf5E3Bpl6PeGTJxlZdT06cPwGVcjWl/yLRV3mCo4i29YRKuxrzLbF1EcZkYle1BwtXYd4lk3HPjUT/gKtZ9+pNou9snsnERxiUHI8W6rIO7SihfF+awMou3UvfhUKGj+wp5lm7uSLFQF2TdRVmcSgjpuHCF95fockL2TUHsi6hAF+Zb0jyuGxdUJela/9mqu31TUHdzn2/ekjqyDmfgzf8eU3djSZnnT+9LIbMeM3X1xfigi0bd7anHdRddeUHiiqgbKcVuXVF0KIEiwfK13BBrFyhmpE8bdRVnZu6VTYmiB13U6/rqri0pNE/3+xKCeNXdDw5VI0VWjpnVMPveNkJX0nSP3S6f95igycBdVN6xuoE9QKObxLu4+uiN6o3jhurScd/rTnA0fUgdkQpD/5n/TleUugicnHXCS3J18Qm6fFzZTlVEGl8DbVZMZdF9/d6eXnx847eNv/qVk3F3TLEoe9aVOaEkLJ8i62pxEcMFBVcOTWkgbMKqPrNu8w5dNS4GtMssXVvzS+qh4slXs64eFwPaZTmEWozFuYwDDNE14GIArpxiLVPowutYp9bdrJg5B1czQnW0+9lr62/T5dR6ydUlTVM26r424i+bdXl62aBr4d0vXMuba/LHzDref18x4qK/Xd7NpNlX1sfn9Tp133hjuCipujpcGBv0z9GFWncbEZtxvbpEXKWuZwVE/QqesC6YuOivuspFo+N0JUcXRNwSXUrLPFXXPb+r5Q3goqBh9gdVwX4Xn6mLxyzUK7XusrLTJl37iEjqeI2n5smKnwbDM3QdeUjqeBedldej+1rP+6XrBm507RwCO1eFtsoLlq6Dt6bqRnXtuU7a+s8or2+Z17OjZXqoVPe8MAMxXMequLC65gQVDZNa18xb1DBveClzCNo4JXQAB++mYRKHrpW3Tle5ljlQ9pauiNRqH3awixhdukbeqbqkVXNYQNI6ZehCfvMTnks1E2+h7rPYUdd5hN0SOWbMpVnY89jxDFrPzIk9t6vXhNEnKtfIIYkX+1bkbl3ZlQMp4FFWpSxe9e6n6jJGiO+65GhWqUAOnS0rMq/WRU7VNSkYhq1e3mUIcaPuG1xxfhiWyC7uu4kQ5z6dTWybsc0P5x+fN5mkeu7hdl0x6NZN3HEOqBgdlepKn65i5u7TdP/sShVNtn4bWTZvUVkr0/rpxfEeyl2qK4pwtXrBTH5xvIVat+qK4ouvP+R7IgPh5CDdrDui4Tar7wseeZu/fftHN5X3R7eMt+gkvpbh/6TbN+Auvce+TkKK9P5iTb5uT3S3SpdV/igDfnTzi7h8BLG8szqHQze1zMsyrTy2QHJ5ZYDuMnXXwFt57Bm/4Vmh25cN7Uns/B0RpfkGSkOu5C0/AU0gUJSAvE5XmnHF+nRCZmL5Pt38RwT32y8BBgDINqoX+oHxQgAAAABJRU5ErkJggg==);background-size:auto 100%}body{background-color:#fafafa;margin:0;-webkit-tap-highlight-color:transparent;-webkit-transition:background-color .5s linear;transition:background-color .5s linear}img{color:transparent}#menu{position:fixed;width:100vw;height:50px;left:0;top:0;background-color:#e61919}.navButtonsCover{height:100%;width:15vh;min-height:40px;top:0;-webkit-transition:background-color .5s linear;transition:background-color .5s linear}.navButtonsCover .navButtons{position:relative;top:10%;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);height:40px;width:40px}#bg2,#pageUrl,#sharebox{position:fixed}.navButtonsCover[data-child=logo]{float:left}#logo{width:58px;background-position:0 0}#helpButton{background-position:-65px 0}#code{background-position:-115px 0}#share{background-position:-171px 0}#sharebox{top:60px;right:5px;margin:0;padding:0}.share{height:50px;width:50px;margin-bottom:5px;border-radius:50%}#bg1,#bg2,#mainPage{width:100%}#tw{background-position:-50px 0}#lnkdIn{background-position:-100px 0}#tb{background-position:0 -50px}#rdit{background-position:-50px -50px}#link{background-position:-100px -50px}#pageUrl{top:20%;z-index:1010;background-color:#fff;font-size:35px;font-weight:600}#pageUrl input{border:none;font-size:30px;background-color:gray;color:#fff}#pageUrl,#pageUrl input{text-align:center;width:80%;left:10%;border-radius:4px;padding:20px 0;margin:20px 0}#tutorial{position:absolute;height:auto;max-width:100%;width:500px;background-color:rgba(0,0,0,.7);border-radius:10px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#pointer{position:absolute;bottom:100%;border:25px solid transparent;border-bottom:30px solid rgba(0,0,0,.7);-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#tutorial p,.tutStep2{color:#fff}#tutStep1{font-size:50px;text-align:center;font-weight:900}#tutorial h3{font-size:25px}ol li{padding-top:5px;padding-bottom:5px}.ball{-webkit-transform:translate(100%,-100%);transform:translate(100%,-100%);opacity:0}#bg1{display:block;-webkit-transition:all .5s linear;transition:all .5s linear;min-height:100%;right:0;top:0;position:absolute;background-color:#fff;z-index:501}#bg1 div{margin-top:60px;-webkit-transition:all .5s;transition:all .5s;opacity:0}#bg1 h2{text-align:center;font-size:6vw;margin:0;font-family:Impact,Arial,sans-serif}#bg1 ol,#bg1 p{font-size:20px;text-align:left;margin-left:20px;margin-right:20px}#bg1 a{color:#e61919;font-weight:600}#bg1 .extrabutton{display:block}#bg2,#dp,#extraContent,#hideextra,#suggest{display:none}#bg2{left:0;top:0;background-color:rgba(0,0,0,.5);height:100%}#mainPage{position:absolute;left:0;bottom:0;top:50px;margin-left:auto;margin-right:auto;text-align:center}.card{width:80%!important;height:auto;margin:20px auto;font-size:1vw;border-radius:4px!important;background-color:#fff}#suggest,#username{width:100%;padding:0}#dp,#input{height:8vw}#prime{padding-top:2vw;padding-bottom:2vw}#actualCount{font-size:11vw!important}#pubDate,#totalVideos,#totalViews{font-size:3vw!important;line-height:1;font-weight:400}label[for=username]{display:inline-block}#dp{margin-right:1vw;border-radius:6vw}#input button,#username{border:none;outline:0}#input{display:inline-block;margin-left:1vw;width:75%;background-color:#e6e6e6;-webkit-transition:background-color .25s;transition:background-color .25s;border-radius:3px}#input button{height:100%;background-color:#e61919;width:8vw;overflow:hidden;bottom:100%;display:none;padding:0;opacity:0}#username{color:#000;font-size:3vw;font-family:Arial,sans-serif;text-align:center;float:left;height:100%;background-color:transparent;-webkit-transition:width .25s;transition:width .25s;border-radius:3px 0 0 3px}#search{height:40px;max-height:60%;width:40px;max-width:60%;margin-left:auto;margin-right:auto;background-position:99% 0}#username:focus{background-color:#ffc8c8;width:90%;-webkit-box-shadow:inset 0 -5px 0 0 #e61919;box-shadow:inset 0 -5px 0 0 #e61919}#username:focus~#inputButton{opacity:1}#suggest{position:absolute;left:0;top:8vw;z-index:400;box-shadow:0 4px 10px -4px #000;margin:0;overflow:hidden;background-color:#fff}.suggest{color:#000;height:50px;padding-bottom:10px;padding-top:10px}.extrabutton,.suggest:hover{background-color:#e61919;color:#fff}.suggest div{font-size:25px;text-align:left;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.suggestImg{float:left;width:50px;height:50px;border-radius:50%;margin-left:10px;margin-right:10px;visibility:hidden}#extra table,.myChart-wrapper{margin-left:auto;margin-right:auto}#bottomPrime{width:100%}#extra{font-weight:400;padding-top:15px;padding-bottom:15px}#extra table{border-collapse:collapse;font-size:2vw;font-weight:100;text-align:center}#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%}.extrabutton{border:none;outline:0;min-width:180px;height:50px;width:15vw;font-size:18px;border-radius:4px;font-weight:900;overflow:hidden;z-index:2;text-transform:uppercase;margin:20px auto}#vids,#vidsText{font-size:25px}#vids{text-align:center;width:5vw;margin:1vw;border:0;border-bottom:.5vw solid #e61919;background-color:rgba(200,200,200,.3)}a{text-decoration:none}@media only screen and (max-width:800px),screen and (orientation:portrait){.navButtonsCover{width:25%}#bg1 h2{font-size:12vw}#pageUrl,#pageUrl input{width:100%;left:0}.card{width:98%!important;font-size:3vw}#extra table{font-size:5vw}#milestoneBox{font-size:8vw}#actualCount{font-size:15vw!important}#pubDate,#totalVideos,#totalViews{font-size:8vw!important}#username:focus{width:84%}#username{font-size:6vw}#dp,#input{height:12vw}#suggest{top:12vw}#input button{width:12vw}.extrabutton{width:30vw}.myChart-wrapper{width:95%}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section id="menu">
|
|
<div class="navButtonsCover" data-child="logo" onClick="(function(){if(typeof(handleNavButtons)!=='undefined')handleNavButtons(1)})()">
|
|
<div id="logo" class="navButtons" alt="YouCount Logo/Homepage"></div>
|
|
</div>
|
|
<div class="navButtonsCover" data-child="share" onClick="(function(){if(typeof(handleNavButtons)!=='undefined')handleNavButtons(4)})()">
|
|
<div id="share" class="navButtons" alt="Share button"></div>
|
|
</div>
|
|
<div class="navButtonsCover" data-child="code" onClick="(function(){if(typeof(handleNavButtons)!=='undefined')handleNavButtons(3)})()">
|
|
<div id="code" class="navButtons" alt="Get YouCount embed or widget"></div>
|
|
</div>
|
|
<div class="navButtonsCover" data-child="helpButton" onClick="(function(){if(typeof(handleNavButtons)!=='undefined')handleNavButtons(2)})()">
|
|
<div id="helpButton" class="navButtons" alt="Help button"></div>
|
|
</div>
|
|
<ul id="sharebox">
|
|
<li id="fb" class="share"></li>
|
|
<li id="tw" class="share"></li>
|
|
<li id="lnkdIn" class="share"></li>
|
|
<li id="tb" class="share"></li>
|
|
<li id="rdit" class="share"></li>
|
|
<li id="link" class="share"></li>
|
|
</ul>
|
|
</section>
|
|
<span id="pageUrl">
|
|
Shareable Link:
|
|
<br><input type="text" value="" onclick="this.select()" readonly />
|
|
</span>
|
|
|
|
<div id="tutorial">
|
|
<div id="pointer"></div>
|
|
<p id="tutStep1">Click Here</p>
|
|
<div id="tutStep2">
|
|
<h3 class="tutStep2">Search for a YouTube channel</h3>
|
|
<span class="tutStep2">For example, to see Fine Brothers Entertainment's live YouTube subscriber count, type in any one of these:</span>
|
|
<ol class="tutStep2">
|
|
<li><b>TheFineBros</b> (their username)</li>
|
|
<li><b>Fine Brothers Entertainment</b> (their YouTube channel name)</li>
|
|
<li><b>UC0v-tlzsn0QZwJnkiaUSJVQ</b> (their YouTube channel ID)</li>
|
|
<li><b>fine bros</b> (a search query)</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="bg ball" id="bg1">
|
|
<div id="helpArt">
|
|
<h2>About YouCount</h2>
|
|
<p>
|
|
YouTube updates the number of subscribers a channel has (its subscriber count) after a long time.
|
|
</p>
|
|
<p>
|
|
On YouCount, the subscriber count, of any YouTube channel, is live and is updated every second!
|
|
</p>
|
|
<p>SHOW STATS button can be clicked to see extra insights of the YouTube channel.</p>
|
|
<p>YouCount has been specifically designed using the Material Design language to make it look awesome! 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:
|
|
<ol>
|
|
<li><a href="//github.com/YouCount/youcount.github.io">Visit the GitHub Project site</a></li>
|
|
<li>Send an Email: <a id="email"></a></li>
|
|
</ol>
|
|
</p>
|
|
<p>Support the website by sharing it with your friends!</p>
|
|
<input type="button" class="extrabutton" value="How to Use" onclick="tutorial(0)">
|
|
</div>
|
|
<div id="codeArt">
|
|
<h2>Embed This!</h2>
|
|
<p>
|
|
Copy the code below and paste it where you want to embed this:</p>
|
|
<p><code id="embedUrl"></code></p>
|
|
<p>
|
|
Adjust its size by changing the "height" and "width" attribute of the iframe.
|
|
The size will automatically adjust to the size of the iframe.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg" id="bg2"></div>
|
|
|
|
<div id="mainPage">
|
|
<section id="prime" class="card">
|
|
<div id="topPrime">
|
|
<label for="username">
|
|
<img id="dp" alt="Channel Image">
|
|
</label>
|
|
<div id="input">
|
|
<input type="text" id="username" placeholder="Search for a YouTube channel" aria-label="Click here to search for a channel" value="Loading..." onkeypress="trigenter(event)"/>
|
|
<button id="inputButton">
|
|
<div id="search"></div>
|
|
</button>
|
|
<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>
|
|
|
|
<div id="bottomPrime">
|
|
<br>
|
|
<span id="actualCount">Loading...</span>
|
|
<br>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="extra" class="card">
|
|
<button class="extrabutton" id="showextra">Show Stats</button>
|
|
<div id="extraContent">
|
|
<div class="myChart-wrapper">
|
|
<canvas width="400" height="200" id="myChart1"></canvas>
|
|
</div>
|
|
<br><br><br>
|
|
<span class="milestones" id="milestoneBox">
|
|
<span id="milestoneLeft">Loading...</span> left from <span id="milestoneTarget">Loading...</span>!
|
|
</span>
|
|
<br><br><br>
|
|
<table>
|
|
<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>
|
|
<p id="vidsText">Last <input aria-label="Input box: Enter number of videos (1-25)" type="text" id="vids" placeholder="1-25" value="5"> videos</p><button class="extrabutton" onclick="upCharts();" id="upCharts">Update</button>
|
|
<div class="myChart-wrapper">
|
|
<canvas width="400" height="200" id="myChart2"></canvas>
|
|
<canvas width="400" height="200" id="myChart3"></canvas>
|
|
<canvas width="400" height="200" id="myChart4"></canvas>
|
|
</div>
|
|
</div>
|
|
<button class="extrabutton" id="hideextra">Hide Stats</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",location.pathname);
|
|
// Odometer
|
|
// eslint-disable-next-line
|
|
(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)noInternet("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)noInternet("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"compvare"===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
|
|
var username='',rawInput=username,channelname='',channeldate='',isBackPressed=0,keyIndex=-1,seconds=0,actualCount=0,intervalId,targets=[10,25,50,100,500,1000,2500,5000,10000,25000,50000,100000,250000,500000,1000000,2000000,3000000,4000000,5000000,6000000,7000000,10000000,15000000,20000000,25000000,30000000,40000000,50000000,70000000,100000000,150000000,200000000,300000000],myLineChart1,internet=1;const developmentMode=0;function getKey(){var b=['AIzaSyBAb4nM48dVlty7LPHm_qrcWrhlQ1P205U'];return-1==keyIndex&&(keyIndex=Math.round(Math.random()*(b.length-1))),++keyIndex,keyIndex===b.length&&(keyIndex=0),b[keyIndex]}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=function(b,c){c=def(c,window);for(var d=0;d<this.length;d++)b.call(c,this[d],d,this)});function ajx(b,c,d){var h=new XMLHttpRequest;h.onreadystatechange=function(){4===h.readyState&&(200===h.status?c&&c(JSON.parse(h.responseText)):(noConnection('ajx failed to load: '+b,!0),d&&d(h.statusText)))},h.open('GET',b),h.send()}function changeText(b,c){'string'==typeof b&&(b=document.getElementById(b)),'INPUT'===b.nodeName.toUpperCase()?b.value=(c+'').trim():b.textContent=(c+'').trim()}function getText(b){return'string'==typeof b&&(b=document.getElementById(b)),'INPUT'===b.nodeName.toUpperCase()?(b.value+'').trim():(b.textContent+'').trim()}function def(b,c){return'undefined'==typeof b?c:b}var isTutorialOn=[0,0];function startAndPops(){if(location.hash.split('#!/')[1])isBackPressed?notFound?queryName():(rawInput=location.hash.split('#!/')[1],queryName()):getValue(location.hash.split('#!/')[1]);else try{isBackPressed=0,tutorial(0)}catch(b){isTutorialOn[0]=1}}function getValue(b){if(b=def(b,getText('username')),!internet)return void changeText('username','Refresh the page');if(b&&!(-1<['Not Found!','Loading.','Loading..','Loading...','Refresh the page'].indexOf(b))){if(isTutorialOn[0])try{tutorial(3)}catch(c){noConnection('queryName unable to call tutorial(3)')}'function'==typeof loading?loading('username'):changeText('username','Loading...'),document.getElementById('username').blur(),rawInput=b,queryName(),intervalId=setInterval(live,1e3)}}function noConnection(b,c){if(!c){internet=0,changeText('actualCount','No Internet');for(var d=['totalViews','totalVideos','pubDate','username'],h=0;h<d.length;h++)changeText(document.getElementById(d[h]),'No Internet');changeText('username','Refresh the page'),document.getElementById('dp').style.display='none',clearInterval(intervalId)}}var isChart=0,notFound=0,firstload=0;function queryName(b){var c=0;'UC'===rawInput.slice(0,2).toUpperCase()&&24===rawInput.length&&(c=1);var h='';h=b?b:'https://www.googleapis.com/youtube/v3/'+['search?part=snippet&type=channel&q','channels?part=snippet&id'][c]+'='+encodeURIComponent(rawInput)+'&fields=items/snippet&maxResults=1&key=';try{ajx(h+getKey(),function(j){if(!j.items)return void noConnection('undef e.items in queryName');if(!b&&!j.items[0].snippet.publishedAt.trim())return changeText('username','Not Found!'),document.getElementById('actualCount').style.display='none',document.getElementById('milestoneBox').style.display='none',document.getElementById('dp').style.display='none',document.getElementById('extra').style.display='none',clearInterval(intervalId),void(notFound=1);1==notFound&&(document.getElementById('actualCount').style.display='inline-block',document.getElementById('milestoneBox').style.display='inline',intervalId=setInterval(live,1e3),notFound=0),document.getElementById('dp').style.display='block',document.getElementById('extra').style.display='block',channelname=j.items[0].snippet.title,changeText(document.getElementById('username'),channelname),document.title=channelname+'\'s YouTube\xAE LIVE Subscriber Count - YouCount',b||(c?username=rawInput:username=j.items[0].snippet.channelId.trim()),2==isChart&&(isChart=1),live();var k=j.items[0].snippet.publishedAt.split('T')[0];if(k=k.split('-'),k[1]=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][+k[1]-1],channeldate=k[2]+'-'+k[1]+'-'+k[0],changeText(document.getElementById('pubDate'),channeldate),0==isBackPressed){var l,o,p='https://www.googleapis.com/youtube/v3/channels?part=snippet&id='+username+'&fields=items/snippet&key='+getKey();ajx(p,function(q){l=q.items[0].snippet.customUrl?q.items[0].snippet.customUrl.trim():channelname.trim().replace(/\s+/g,'+'),p='https://www.googleapis.com/youtube/v3/search?part=snippet&q='+encodeURIComponent(l)+'&type=channel&maxResults=1&key='+getKey(),ajx(p,function(r){o=1>r.pageInfo.totalResults||r.items[0].snippet.channelId.trim()!==username?username:l,history.pushState(null,null,'#!/'+o),changeText(document.getElementById('embedUrl'),'<iframe src="https://youcount.github.io/e/#!/'+o+'" height="100" width="250" frameborder="0"></iframe>'),changeText(document.querySelector('#pageUrl input'),'https://youcount.github.io/#!/'+o)})})}else isBackPressed=0;firstload,document.getElementById('dp').src=j.items[0].snippet.thumbnails.default.url,ga('send','pageview',location.pathname)},function(){noConnection('queryName no response from ajx')})}catch(j){noConnection(j)}}var isLive=0,myLineChart1Data,prevCounts=[0,0,0,0,0];function live(){var b='https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+username+'&fields=items/statistics/subscriberCount&key='+getKey();try{ajx(b,function(c){var d=actualCount;if(!c.items||!c.items[0].statistics.subscriberCount)noConnection('undef e.items or e.items[0].statistics.subscriberCount in live',!0);else{actualCount=c.items[0].statistics.subscriberCount;for(var h=0,j=0;j<targets.length;j++)if(actualCount<=targets[j]){h=targets[j];break}var k=h-actualCount;if(document.body.style.backgroundColor=0<actualCount-d?'rgb(240,255,240)':0==actualCount-d?'rgb(250,250,250)':'rgb(255,240,240)',1==isChart&&(myLineChart1Data={labels:[''],datasets:[{label:'Realtime Trend (30s)',fill:!1,borderColor:'rgba(255,50,50,0.5)',pointRadius:0,data:[actualCount]}]},myLineChart1=new Chart(document.getElementById('myChart1').getContext('2d'),{type:'line',data:myLineChart1Data,gridLines:{display:!1},responsive:!0,maintainAspectRatio:!1}),isChart=2,seconds=0),++seconds,prevCounts[seconds%5]=actualCount,!isLive)new Odometer({el:document.getElementById('actualCount'),value:actualCount,format:'(,ddd)',theme:'minimal'}),new Odometer({el:document.getElementById('milestoneLeft'),value:k,format:'(,ddd)',theme:'minimal'}),isLive=1;else if(changeText(document.getElementById('actualCount'),actualCount),changeText(document.getElementById('milestoneLeft'),k),changeText(document.getElementById('milestoneTarget'),h.toLocaleString('en-US')),1>k&&-1<k&&changeText('milestoneBox','Congratulations!'),2==isChart&&0==seconds%5){for(j=0;5>j;j++)myLineChart1.data.labels.push('');for(j=0;5>j;j++)myLineChart1.data.datasets[0].data.push(prevCounts[j]);if(30<seconds)for(j=0;5>j;j++)myLineChart1.data.labels.shift(),myLineChart1.data.datasets[0].data.shift();myLineChart1.update()}}},function(){noConnection('live no response from ajx',!0)})}catch(c){noConnection(c,!0)}}window.top!==window.self||window.top.location!==window.self.location?window.top.location=window.self.location:'youcount.github.io'!==window.location.hostname||'youcount.github.io'!==window.top.location.hostname?window.location.hostname='youcount.github.io':startAndPops(),window.onpopstate=function(){isBackPressed=1,'function'==typeof loading?loading('username'):changeText('username','Loading...'),startAndPops()},tutorial=void 0,document.getElementById('username').addEventListener('focusin',function(){isTutorialOn[0]&&tutorial&&(changeText('username',''),tutorial(1)),document.getElementById('username').select(),document.getElementById('inputButton').style.display='block'}),document.getElementById('username').addEventListener('focusout',function(){setTimeout(function(){document.getElementById('suggest').style.display='none',document.getElementById('inputButton').style.display='none','undefined'!=typeof usernameKeyUp&&usernameKeyUp[0]&&(clearInterval(usernameKeyUpInter),usernameKeyUp=[!1,!1]),3===isTutorialOn[1]&&tutorial(1)},200)});function trigenter(b){13===b.keyCode&&getValue()}function getScript(b,c,d,h){var j=document.createElement('script'),k=document.getElementsByTagName('script')[0];if(j.async=1,k.parentNode.insertBefore(j,k),j.onload=j.onreadystatechange=function(o,p){(p||!j.readyState||/loaded|compvare/.test(j.readyState))&&(j.onload=j.onreadystatechange=null,j=void 0,p?noConnection('getScript failed to load'+b):c&&c())},d&&h)for(var l=0;l<d.length;l++)d[l]&&(j[d[l]]=h[l]);j.src=b}window.onload=function(){getScript('js/script.js'),'serviceWorker'in navigator&&navigator.serviceWorker.register('/sw.js')};
|
|
</script>
|
|
</body>
|
|
</html>
|