├── res
    ├── embeds.png
    ├── Example1.png
    └── Example2.png
├── assets
    ├── close.html
    ├── images
    │   ├── banner.jpg
    │   ├── icon.png
    │   ├── sharing.png
    │   ├── sharing.pvc.png
    │   └── sharing.pvt.png
    ├── js
    │   ├── query.vs.js
    │   ├── live.core.js
    │   ├── live.view.js
    │   ├── live.vs.js
    │   ├── urlManager.view.js
    │   ├── base.js
    │   ├── urlManager.core.js
    │   ├── query.view.js
    │   ├── urlManager.vs.js
    │   ├── updateManager.vs.js
    │   ├── sharing.view.js
    │   ├── sharing.core.js
    │   ├── updateManager.core.js
    │   ├── query.core.js
    │   ├── updateManager.view.js
    │   ├── custom-ui.js
    │   ├── init.js
    │   ├── featured.view.js
    │   ├── featured.core.js
    │   ├── multisearch.core.js
    │   ├── multisearch.view.js
    │   ├── multisearch.vs.js
    │   ├── sharing.vs.js
    │   └── waves.js
    └── css
    │   ├── stylevs.css
    │   ├── odometer-theme-custom.css
    │   ├── colors
    │       └── light.css
    │   └── style.css
├── .gitignore
├── 404.html
├── package.json
├── README.md
├── compare
    └── index.html
├── live-view-count
    └── index.html
├── pewdiepie-vs-mrbeast
    └── index.html
├── pewdiepie-vs-cocomelon
    └── index.html
└── index.html


/res/embeds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/res/embeds.png


--------------------------------------------------------------------------------
/res/Example1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/res/Example1.png


--------------------------------------------------------------------------------
/res/Example2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/res/Example2.png


--------------------------------------------------------------------------------
/assets/close.html:
--------------------------------------------------------------------------------
1 | <script>
2 |     close();
3 |     open(location, '_self').close();
4 | </script>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.psd
2 | .htaccess
3 | _internal
4 | # Local Netlify folder
5 | .netlify
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/assets/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/assets/images/banner.jpg


--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/sharing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/assets/images/sharing.png


--------------------------------------------------------------------------------
/assets/images/sharing.pvc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/assets/images/sharing.pvc.png


--------------------------------------------------------------------------------
/assets/images/sharing.pvt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshatmittal/youtube-realtime/HEAD/assets/images/sharing.pvt.png


--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
 1 | <meta http-equiv="refresh" content="3; url=https://gh.akshatmittal.com/youtube-realtime/">
 2 | 
 3 | <body>
 4 |    <h1>404</h1>
 5 |    <p>We will redirect you to the home page in 3 seconds.</p>
 6 |    <style>
 7 |       h1 {
 8 |          font-family: Arial, Helvetica, sans-serif;
 9 |       }
10 | 
11 |       p {
12 |          font-family: Arial, Helvetica, sans-serif;
13 |       }
14 |    </style>
15 | </body>


--------------------------------------------------------------------------------
/assets/js/query.vs.js:
--------------------------------------------------------------------------------
 1 | YT.query = {
 2 |   begin: function () {
 3 |     $.getJSON(
 4 |       "https://mixerno.space/api/youtube-channel-counter/user/" + encodeURIComponent(YT.live.vs1),
 5 |       function (f) {
 6 |         $.getJSON(
 7 |           "https://mixerno.space/api/youtube-channel-counter/user/" + encodeURIComponent(YT.live.vs2),
 8 |           function (g) {
 9 |             YT.updateManager.updateCover(f.user[2].count, g.user[2].count);
10 |             YT.updateManager.updateName(f.user[0].count, g.user[0].count);
11 |             YT.updateManager.updateProfile(f.user[1].count, g.user[1].count);
12 |           },
13 |         );
14 |       },
15 |     );
16 |   },
17 |   bind: function () {},
18 | };
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "youtube-realtime",
 3 |   "version": "1.0.0",
 4 |   "description": "Live YouTube Subscriber Count",
 5 |   "scripts": {
 6 |     "start": "http-server --ssl --cert _internal\\ssl.cert --key _internal\\ssl.key -a local.akshatmittal.com -p 8443",
 7 |     "serve": "npx serve@latest"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/akshatmittal/youtube-realtime.git"
12 |   },
13 |   "author": "Akshat Mittal",
14 |   "bugs": {
15 |     "url": "https://github.com/akshatmittal/youtube-realtime/issues"
16 |   },
17 |   "homepage": "https://akshatmittal.com/youtube-realtime/",
18 |   "dependencies": {
19 |     "http-server": "^0.12.3"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/assets/js/live.core.js:
--------------------------------------------------------------------------------
 1 | YT.live = {
 2 |   channelID: "",
 3 |   update: function () {
 4 |     $.getJSON("https://mixerno.space/api/youtube-channel-counter/user/" + this.channelID, function (e) {
 5 |       if (e) {
 6 |         YT.updateManager.updateSubscribers(e.counts[2].count);
 7 |         YT.updateManager.updateViews(e.counts[3].count);
 8 |         YT.updateManager.updateVideos(e.counts[5].count);
 9 |       } else {
10 |         YT.query.newSearch(YT.live.channelID);
11 |       }
12 |     });
13 |   },
14 |   timer: null,
15 |   start: function () {
16 |     this.stop();
17 |     this.timer = setInterval(function (e) {
18 |       YT.live.update();
19 |     }, 2000);
20 |     YT.live.update();
21 |   },
22 |   stop: function () {
23 |     clearInterval(this.timer);
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/assets/js/live.view.js:
--------------------------------------------------------------------------------
 1 | YT.live = {
 2 |   channelID: "",
 3 |   update: function () {
 4 |     $.getJSON("https://mixerno.space/api/youtube-video-counter/user/" + this.channelID, function (e) {
 5 |       if (e) {
 6 |         YT.updateManager.updateViews(e.counts[2].count);
 7 |         YT.updateManager.updateLikes(e.counts[3].count);
 8 |         YT.updateManager.updateDislikes(e.counts[4].count);
 9 |         YT.updateManager.updateComments(e.counts[5].count);
10 |       } else {
11 |         YT.query.newSearch(YT.live.channelID);
12 |       }
13 |     });
14 |   },
15 |   timer: null,
16 |   start: function () {
17 |     this.stop();
18 |     this.timer = setInterval(function (e) {
19 |       YT.live.update();
20 |     }, 2000);
21 |     YT.live.update();
22 |   },
23 |   stop: function () {
24 |     clearInterval(this.timer);
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/assets/js/live.vs.js:
--------------------------------------------------------------------------------
 1 | YT.live = {
 2 |   vs1: "",
 3 |   vs2: "",
 4 |   update: function () {
 5 |     $.getJSON("https://mixerno.space/api/youtube-channel-counter/user/" + YT.live.vs1, function (f) {
 6 |       $.getJSON("https://mixerno.space/api/youtube-channel-counter/user/" + YT.live.vs2, function (g) {
 7 |         YT.updateManager.updateSubscribers(f.counts[2].count, g.counts[2].count);
 8 |       });
 9 |     });
10 |   },
11 |   timer: null,
12 |   setVS: function (e, f) {
13 |     this.vs1 = e;
14 |     this.vs2 = f;
15 |     this.start();
16 |   },
17 |   start: function () {
18 |     this.stop();
19 |     YT.query.begin();
20 |     this.timer = setInterval(function (e) {
21 |       YT.live.update();
22 |     }, 10000);
23 |     YT.live.update();
24 |   },
25 |   stop: function () {
26 |     clearInterval(this.timer);
27 |   },
28 | };
29 | 


--------------------------------------------------------------------------------
/assets/js/urlManager.view.js:
--------------------------------------------------------------------------------
 1 | YT.urls = {
 2 |   onchange: function () {
 3 |     var q = location.hash.split("!/")[1];
 4 |     if (q) {
 5 |       YT.query.newSearch(location.hash.split("!/")[1]);
 6 |     } else {
 7 |       var coolGuys = ["9bZkp7q19f0", "YQHsXMglC9A", "60ItHLz5WEA", "pk7ESz6vtyA", "gwMa6gpoE9I"];
 8 |       YT.query.newSearch(coolGuys[Math.floor(Math.random() * coolGuys.length)]);
 9 |     }
10 |   },
11 |   pushState: function (e) {
12 |     history.pushState(null, null, "#!/" + e);
13 |     DISQUS.reset({
14 |       reload: true,
15 |       config: function () {
16 |         this.page.identifier = e;
17 |         this.page.url = baseURL + "live-view-count/#!/" + e;
18 |       },
19 |     });
20 |     YT.query.newSearch(e);
21 |   },
22 |   getCurrent: function () {
23 |     return baseURL + "live-view-count/#!/" + YT.live.channelID;
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/assets/js/base.js:
--------------------------------------------------------------------------------
 1 | var baseURL = "https://gh.akshatmittal.com/youtube-realtime/";
 2 | if (typeof isCustomPage == "undefined") isCustomPage = 0;
 3 | // if (window.location.hostname.indexOf("local.akshatmittal.com") < 0) {
 4 | //     if (window.location.protocol != "https:") window.location.replace("https:" + window.location.href.substring(window.location.protocol.length));
 5 | //     if (location.hostname.indexOf("akshatmittal.com") == -1) window.location.replace(baseURL + location.hash);
 6 | //     if (window.top !== window.self) window.top.location.replace(window.self.location.href);
 7 | // }
 8 | Array.prototype.shuffle = function () {
 9 |   var i = this.length,
10 |     j,
11 |     temp;
12 |   if (i == 0) return this;
13 |   while (--i) {
14 |     j = Math.floor(Math.random() * (i + 1));
15 |     temp = this[i];
16 |     this[i] = this[j];
17 |     this[j] = temp;
18 |   }
19 |   return this;
20 | };
21 | var YT = {};
22 | 


--------------------------------------------------------------------------------
/assets/js/urlManager.core.js:
--------------------------------------------------------------------------------
 1 | YT.urls = {
 2 |   onchange: function () {
 3 |     var q = location.hash.split("!/")[1];
 4 |     if (q) {
 5 |       YT.query.newSearch(location.hash.split("!/")[1]);
 6 |     } else {
 7 |       var coolGuys = [
 8 |         "UCBJycsmduvYEL83R_U4JriQ",
 9 |         "UCtinbF-Q-fVthA0qrFQTgXQ",
10 |         "UCp0hYYBW6IMayGgR-WeoCvQ",
11 |         "UCBJycsmduvYEL83R_U4JriQ",
12 |       ];
13 |       YT.query.newSearch(coolGuys[Math.floor(Math.random() * coolGuys.length)]);
14 |     }
15 |   },
16 |   pushState: function (e) {
17 |     history.pushState(null, null, "#!/" + e);
18 |     DISQUS.reset({
19 |       reload: true,
20 |       config: function () {
21 |         this.page.identifier = e;
22 |         this.page.url = baseURL + "#!/" + e;
23 |       },
24 |     });
25 |     YT.query.newSearch(e);
26 |   },
27 |   getCurrent: function () {
28 |     return baseURL + "#!/" + YT.live.channelID;
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/assets/css/stylevs.css:
--------------------------------------------------------------------------------
 1 | .page-wrapper {
 2 |   margin-left: 0 !important;
 3 | }
 4 | 
 5 | .footer {
 6 |   left: 0 !important;
 7 |   text-align: center;
 8 | }
 9 | 
10 | .container {
11 |   width: auto !important;
12 |   max-width: 1440px;
13 | }
14 | 
15 | .navbar-header {
16 |   width: 100%;
17 | }
18 | 
19 | .navbar-brand {
20 |   font-size: 1.65em;
21 | }
22 | 
23 | .display-1 {
24 |   font-size: 7rem !important;
25 | }
26 | 
27 | .display-title {
28 |   text-align: center;
29 | }
30 | 
31 | @media (max-width: 1260px) {
32 |   .display-1 {
33 |     font-size: 6rem !important;
34 |   }
35 | }
36 | 
37 | @media (max-width: 1100px) {
38 |   .display-1 {
39 |     font-size: 5rem !important;
40 |   }
41 | }
42 | 
43 | @media (max-width: 950px) {
44 |   .display-1 {
45 |     font-size: 4.2rem !important;
46 |   }
47 | }
48 | 
49 | @media (max-width: 820px) {
50 |   .display-1 {
51 |     font-size: 3.5rem !important;
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/assets/js/query.view.js:
--------------------------------------------------------------------------------
 1 | YT.query = {
 2 |   newSearch: function (e) {
 3 |     if (e.trim() == YT.live.channelID || e.trim() == "") {
 4 |       return;
 5 |     }
 6 |     YT.live.stop();
 7 |     $.getJSON("https://mixerno.space/api/youtube-video-counter/search/" + encodeURIComponent(e), function (e) {
 8 |       if (!e.list || e.list.length === 0) {
 9 |         alert("No results found!");
10 |         return;
11 |       }
12 |       YT.updateManager.updateChannelID(e.list[0][2]);
13 |       YT.updateManager.updateCover(e.list[0][1]);
14 |       YT.updateManager.updateName(e.list[0][0]);
15 |       YT.updateManager.updateProfile(e.list[0][1]);
16 |       YT.urls.pushState(e.list[0][2]);
17 |       YT.live.start();
18 |     });
19 |   },
20 |   search: function (e) {
21 |     e.preventDefault();
22 |     YT.query.newSearch($("#yt_searchvalue").val());
23 |     $("#yt_searchvalue").val("");
24 |   },
25 |   bind: function () {
26 |     $("#yt_search").on("submit", this.search);
27 |     $("#yt_searchbutton").on("click", this.search);
28 |   },
29 | };
30 | 


--------------------------------------------------------------------------------
/assets/js/urlManager.vs.js:
--------------------------------------------------------------------------------
 1 | YT.urls = {
 2 |   onchange: function () {
 3 |     var q = location.hash.split("!/")[1];
 4 |     if (q) {
 5 |       var q = q.split("$$");
 6 |       if (q[0] > q[1]) {
 7 |         c = q[0];
 8 |         q[0] = q[1];
 9 |         q[1] = c;
10 |       }
11 |       YT.urls.pushState(q[0], q[1]);
12 |     } else {
13 |       YT.urls.pushState("UC-lHJZR3Gqxm24_Vd_AJ5Yw", "UCq-Fj5jknLsUf-MWSy4_brA");
14 |     }
15 |   },
16 |   pushState: function (e, f) {
17 |     if (e > f) {
18 |       c = e;
19 |       e = f;
20 |       f = c;
21 |     }
22 |     history.pushState(null, null, "#!/" + e + "$$" + f);
23 |     setTimeout(function () {
24 |       DISQUS.reset({
25 |         reload: true,
26 |         config: function () {
27 |           this.page.identifier = YT.live.vs1 + "$$" + YT.live.vs2;
28 |           this.page.url = baseURL + "compare/#!/" + YT.live.vs1 + "$$" + YT.live.vs2;
29 |         },
30 |       });
31 |     }, 500);
32 |     YT.live.setVS(e, f);
33 |   },
34 |   getCurrent: function () {
35 |     return baseURL + "compare/#!/" + YT.live.vs1 + "$$" + YT.live.vs2;
36 |   },
37 | };
38 | 


--------------------------------------------------------------------------------
/assets/js/updateManager.vs.js:
--------------------------------------------------------------------------------
 1 | YT.updateManager = {
 2 |   prepare: function (e) {
 3 |     var odEl = ["#yt_subs_vs1", "#yt_subs_vs2", "#yt_diff"];
 4 |     odEl.forEach(function (e) {
 5 |       new Odometer({
 6 |         el: document.querySelector(e),
 7 |         value: "0",
 8 |         format: "(,ddd)",
 9 |         theme: "minimal",
10 |       });
11 |     });
12 |   },
13 |   updateName: function (e, f) {
14 |     $(".vs1_name").text(e);
15 |     $(".vs2_name").text(f);
16 |   },
17 |   updateProfile: function (e, f) {
18 |     $("#yt_profile_vs1").attr("src", e);
19 |     $("#yt_profile_vs2").attr("src", f);
20 |   },
21 |   updateCover: function (e, f) {
22 |     $("#yt_cover_vs1").attr("src", e);
23 |     $("#yt_cover_vs2").attr("src", f);
24 |   },
25 |   updateSubscribers: function (e, f) {
26 |     $("#yt_subs_vs1").text(e);
27 |     $("#yt_subs_vs2").text(f);
28 |     $("#yt_diff").text(Math.abs(parseInt(e) - parseInt(f)));
29 |     if (parseInt(e) - parseInt(f) > 0) {
30 |       $(document.body).addClass("leading-left").removeClass("leading-right");
31 |     } else {
32 |       $(document.body).addClass("leading-right").removeClass("leading-left");
33 |     }
34 |   },
35 | };
36 | 


--------------------------------------------------------------------------------
/assets/js/sharing.view.js:
--------------------------------------------------------------------------------
 1 | YT.sharing = {
 2 |   youtube: function () {
 3 |     window.open("https://www.youtube.com/watch?v=" + YT.live.channelID);
 4 |   },
 5 |   archive: function () {
 6 |     // window.open("https://promote.counts.live/youtube-view-count/" + YT.live.channelID);
 7 |   },
 8 |   cl: function () {
 9 |     // window.open("https://counts.live/youtube-view-count/" + YT.live.channelID);
10 |   },
11 |   twitter: function () {
12 |     window.open(
13 |       "https://twitter.com/intent/tweet?original_referer=" +
14 |         YT.sharing.getEncodedURL() +
15 |         "&ref_src=twsrc%5Etfw&text=" +
16 |         YT.sharing.getText() +
17 |         "&tw_p=tweetbutton&via=iakshatmittal&url=" +
18 |         YT.sharing.getEncodedURL(),
19 |     );
20 |   },
21 |   compare: function () {
22 |     $(".super-search,.dark-bg").fadeIn();
23 |     $("#yt_searchvalue_m").focus();
24 |   },
25 |   getText: function () {
26 |     return encodeURIComponent("Check out " + $("#yt_name").text() + "'s real time live view count on @YouTube!");
27 |   },
28 |   getEncodedURL: function () {
29 |     return encodeURIComponent(YT.urls.getCurrent());
30 |   },
31 |   bind: function () {
32 |     $("#yt_shareyt").on("click", this.youtube);
33 |     $("#yt_sharetw").on("click", this.twitter);
34 |     $("#yt_sharear").on("click", this.archive);
35 |     $("#yt_sharear2").on("click", this.cl);
36 |     $("#yt_compare").on("click", this.compare);
37 |   },
38 | };
39 | 


--------------------------------------------------------------------------------
/assets/js/sharing.core.js:
--------------------------------------------------------------------------------
 1 | YT.sharing = {
 2 |   youtube: function () {
 3 |     window.open("https://www.youtube.com/channel/" + YT.live.channelID);
 4 |   },
 5 |   archive: function () {
 6 |     // window.open("https://promote.counts.live/youtube-subscriber-count/" + YT.live.channelID);
 7 |   },
 8 |   cl: function () {
 9 |     // window.open("https://counts.live/youtube-subscriber-count/" + YT.live.channelID);
10 |   },
11 |   twitter: function () {
12 |     window.open(
13 |       "https://twitter.com/intent/tweet?original_referer=" +
14 |         YT.sharing.getEncodedURL() +
15 |         "&ref_src=twsrc%5Etfw&text=" +
16 |         YT.sharing.getText() +
17 |         "&tw_p=tweetbutton&via=iakshatmittal&url=" +
18 |         YT.sharing.getEncodedURL(),
19 |     );
20 |   },
21 |   compare: function () {
22 |     $(".super-search,.dark-bg").fadeIn();
23 |     $("#yt_searchvalue_m").focus();
24 |   },
25 |   getText: function () {
26 |     return encodeURIComponent("Check out " + $("#yt_name").text() + "'s real time subscriber count on @YouTube!");
27 |   },
28 |   getEncodedURL: function () {
29 |     return encodeURIComponent(YT.urls.getCurrent());
30 |   },
31 |   bind: function () {
32 |     $("#yt_shareyt").on("click", this.youtube);
33 |     $("#yt_sharetw").on("click", this.twitter);
34 |     $("#yt_sharear").on("click", this.compare);
35 |     $("#yt_sharear2").on("click", this.cl);
36 |     $("#yt_compare").on("click", this.compare);
37 |   },
38 | };
39 | 


--------------------------------------------------------------------------------
/assets/js/updateManager.core.js:
--------------------------------------------------------------------------------
 1 | YT.updateManager = {
 2 |   prepare: function (e) {
 3 |     var odEl = ["#yt_subs", "#yt_views", "#yt_videos"];
 4 |     odEl.forEach(function (e) {
 5 |       new Odometer({
 6 |         el: document.querySelector(e),
 7 |         value: "0",
 8 |         format: "(,ddd)",
 9 |         theme: "minimal",
10 |       });
11 |     });
12 |   },
13 |   updateName: function (e) {
14 |     $(".yt_name").text(e);
15 |   },
16 |   updateProfile: function (e) {
17 |     $("#yt_profile").attr("src", e);
18 |   },
19 |   updateCover: function (e) {
20 |     $("#yt_cover").attr("src", e);
21 |   },
22 |   updateSubscribers: function (e) {
23 |     $("#yt_subs").text(e);
24 |   },
25 |   updateViews: function (e) {
26 |     $("#yt_views").text(e);
27 |   },
28 |   updateVideos: function (e) {
29 |     $("#yt_videos").text(e);
30 |   },
31 |   updateChannelID: function (e) {
32 |     YT.live.channelID = e;
33 |     $("#yt_shareurl").val(YT.urls.getCurrent());
34 |     $("#yt_embed_small").val(
35 |       '<iframe style="height:80px;width:300px;border:none;" frameborder="0" src="https://counts.live/embeds/youtube-subscriber-count/' +
36 |         YT.live.channelID +
37 |         '/small" />',
38 |     );
39 |     $("#yt_embed_large").val(
40 |       '<iframe style="height:350px;width:320px;border:none;" frameborder="0" src="https://counts.live/embeds/youtube-subscriber-count/' +
41 |         YT.live.channelID +
42 |         '/large" />',
43 |     );
44 |   },
45 | };
46 | 


--------------------------------------------------------------------------------
/assets/js/query.core.js:
--------------------------------------------------------------------------------
 1 | YT.query = {
 2 |   newSearch: function (e) {
 3 |     if (e.trim() == YT.live.channelID || e.trim() == "") {
 4 |       return;
 5 |     }
 6 |     YT.live.stop();
 7 |     if (e.trim().substr(0, 2).toUpperCase() == "UC" && e.trim().length >= 24) {
 8 |       console.log(e);
 9 |       $.getJSON("https://mixerno.space/api/youtube-channel-counter/user/" + encodeURIComponent(e), function (f) {
10 |         if (!e) {
11 |           alert("No results found!");
12 |           location.href = baseURL;
13 |           return;
14 |         }
15 |         YT.updateManager.updateChannelID(encodeURIComponent(e));
16 |         YT.updateManager.updateCover(f.user[2].count);
17 |         YT.updateManager.updateName(f.user[0].count);
18 |         YT.updateManager.updateProfile(f.user[1].count);
19 |         YT.urls.pushState(encodeURIComponent(e));
20 |         YT.live.start();
21 |       });
22 |     } else {
23 |       $.getJSON("https://mixerno.space/api/youtube-channel-counter/search/" + encodeURIComponent(e), function (e) {
24 |         if (!e) {
25 |           alert("No results found!");
26 |           location.href = baseURL;
27 |           return;
28 |         }
29 |         YT.query.newSearch(e.list[0][2]);
30 |       });
31 |     }
32 |   },
33 |   search: function (e) {
34 |     e.preventDefault();
35 |     YT.query.newSearch($("#yt_searchvalue").val());
36 |     $("#yt_searchvalue").val("");
37 |   },
38 |   bind: function () {
39 |     $("#yt_search").on("submit", this.search);
40 |     $("#yt_searchbutton").on("click", this.search);
41 |   },
42 | };
43 | 


--------------------------------------------------------------------------------
/assets/js/updateManager.view.js:
--------------------------------------------------------------------------------
 1 | YT.updateManager = {
 2 |   prepare: function (e) {
 3 |     var odEl = ["#yt_views", "#yt_likes", "#yt_dislikes", "#yt_comments"];
 4 |     odEl.forEach(function (e) {
 5 |       new Odometer({
 6 |         el: document.querySelector(e),
 7 |         value: "0",
 8 |         format: "(,ddd)",
 9 |         theme: "minimal",
10 |       });
11 |     });
12 |   },
13 |   updateName: function (e) {
14 |     $(".yt_name").html(e);
15 |   },
16 |   updateProfile: function (e) {
17 |     $("#yt_profile").attr("src", e);
18 |   },
19 |   updateCover: function (e) {
20 |     $("#yt_cover").attr("src", e);
21 |   },
22 |   updateViews: function (e) {
23 |     $("#yt_views").text(e);
24 |   },
25 |   updateLikes: function (e) {
26 |     $("#yt_likes").text(e);
27 |   },
28 |   updateDislikes: function (e) {
29 |     $("#yt_dislikes").text(e);
30 |   },
31 |   updateComments: function (e) {
32 |     $("#yt_comments").text(e);
33 |   },
34 |   updateChannelID: function (e) {
35 |     YT.live.channelID = e;
36 |     $("#yt_shareurl").val(YT.urls.getCurrent());
37 |     $("#yt_embed_small").val(
38 |       '<iframe style="height:80px;width:300px;border:none;" frameborder="0" src="https://counts.live/embeds/youtube-view-count/' +
39 |         YT.live.channelID +
40 |         '/small" />',
41 |     );
42 |     $("#yt_embed_large").val(
43 |       '<iframe style="height:350px;width:320px;border:none;" frameborder="0" src="https://counts.live/embeds/youtube-view-count/' +
44 |         YT.live.channelID +
45 |         '/large" />',
46 |     );
47 |   },
48 | };
49 | 


--------------------------------------------------------------------------------
/assets/js/custom-ui.js:
--------------------------------------------------------------------------------
 1 | $(function () {
 2 |   "use strict";
 3 |   $(function () {
 4 |     $(".preloader").fadeOut();
 5 |   });
 6 |   var set = function () {
 7 |     var width = window.innerWidth > 0 ? window.innerWidth : this.screen.width;
 8 |     var topOffset = 70;
 9 |     if (width < 1170) {
10 |       $("body").addClass("mini-sidebar");
11 |       $(".navbar-brand span").hide();
12 |       $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
13 |       $(".sidebartoggler i").addClass("ti-menu");
14 |     } else {
15 |       $("body").removeClass("mini-sidebar");
16 |       $(".navbar-brand span").show();
17 |     }
18 | 
19 |     var height = (window.innerHeight > 0 ? window.innerHeight : this.screen.height) - 1;
20 |     height = height - topOffset;
21 |     if (height < 1) height = 1;
22 |     if (height > topOffset) {
23 |       $(".page-wrapper").css("min-height", height + "px");
24 |     }
25 |   };
26 |   $(window).ready(set);
27 |   $(window).on("resize", set);
28 | 
29 |   $(".fix-header .topbar").stick_in_parent({});
30 | 
31 |   $(".nav-toggler").click(function () {
32 |     $("body").toggleClass("show-sidebar");
33 |     $(".nav-toggler i").toggleClass("ti-menu");
34 |     $(".nav-toggler i").addClass("ti-close");
35 |   });
36 |   $("a[href^='#']").on("click", function (e) {
37 |     e.preventDefault();
38 |     $("html, body").animate(
39 |       {
40 |         scrollTop: $(this.hash).offset().top - 90,
41 |       },
42 |       300,
43 |     );
44 |   });
45 | 
46 |   $("body").trigger("resize");
47 | });
48 | 


--------------------------------------------------------------------------------
/assets/js/init.js:
--------------------------------------------------------------------------------
 1 | function injectJs(e, id) {
 2 |   var t = document.createElement("script");
 3 |   t.type = "text/javascript";
 4 |   t.async = !0;
 5 |   t.src = e;
 6 |   if (id) {
 7 |     t.id = id;
 8 |   }
 9 |   (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(t);
10 | }
11 | $(window).bind("popstate", YT.urls ? YT.urls.onchange : false);
12 | $(function () {
13 |   YT.updateManager.prepare();
14 |   YT.sharing.bind();
15 |   YT.multisearch.bind();
16 |   YT.query.bind();
17 |   YT.pins && YT.pins.getPins();
18 |   YT.urls && YT.urls.onchange();
19 |   // Meta
20 |   (adsbygoogle = window.adsbygoogle || []).push({});
21 |   (adsbygoogle = window.adsbygoogle || []).push({});
22 |   (adsbygoogle = window.adsbygoogle || []).push({});
23 |   injectJs("https://platform.twitter.com/widgets.js");
24 | });
25 | (function (i, s, o, g, r, a, m) {
26 |   i["GoogleAnalyticsObject"] = r;
27 |   (i[r] =
28 |     i[r] ||
29 |     function () {
30 |       (i[r].q = i[r].q || []).push(arguments);
31 |     }),
32 |     (i[r].l = 1 * new Date());
33 |   (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
34 |   a.async = 1;
35 |   a.src = g;
36 |   m.parentNode.insertBefore(a, m);
37 | })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");
38 | ga("create", "UA-50190232-6", "auto");
39 | ga("send", "pageview", {
40 |   page: location.pathname + location.search + location.hash,
41 |   title: document.title,
42 | });
43 | var disqus_config = function () {
44 |   this.page.url = "";
45 |   this.page.identifier = "";
46 | };
47 | 


--------------------------------------------------------------------------------
/assets/js/featured.view.js:
--------------------------------------------------------------------------------
 1 | YT.pins = {
 2 |   url: "https://promote.counts.live/api/get",
 3 |   getPins: function () {
 4 |     // $.getJSON(this.url, function (e) {
 5 |     //     $pn = $("#pinned_nav");
 6 |     //     $pn.html("");
 7 |     //     $pn.append($('<li class="nav-small-cap">FEATURED VIDEOS</li>'));
 8 |     //     var users = e.users.filter(e => e.service === "youtube-view-count");
 9 |     //     $.when.apply(null, users.map(e => $.getJSON("https://api.subscribercounter.nl/api/" + e.service + "/" + e.id + "/data"))).done(function () {
10 |     //         for (var x in arguments) {
11 |     //             var f = arguments[x];
12 |     //             if (users.length > 1) {
13 |     //                 f = f[0];
14 |     //             }
15 |     //             if (!f.success) continue;
16 |     //             $li = $("<li>");
17 |     //             $a = $("<a>", {
18 |     //                 class: "waves-effect waves-dark",
19 |     //                 href: "#!/" + f.data.lv_identifier
20 |     //             });
21 |     //             $i = $("<i>", {
22 |     //                 class: "fa fa-user"
23 |     //             });
24 |     //             $a.append($i);
25 |     //             $span = $("<span>", {
26 |     //                 class: "hide-menu"
27 |     //             }).text(f.data.name);
28 |     //             $a.append($span);
29 |     //             $li.append($a);
30 |     //             $pn.append($li);
31 |     //         }
32 |     //         $pn.append($('<li><a class="waves-effect waves-dark" href="https://promote.counts.live" target="_blank"><i class="fa fa-link"></i><span class="hide-menu">Your Video Here</span></a></li>'))
33 |     //     });
34 |     // })
35 |   },
36 | };
37 | 


--------------------------------------------------------------------------------
/assets/js/featured.core.js:
--------------------------------------------------------------------------------
 1 | YT.pins = {
 2 |   url: "https://promote.counts.live/api/get",
 3 |   getPins: function () {
 4 |     // $.getJSON(this.url, function (e) {
 5 |     //     $pn = $("#pinned_nav");
 6 |     //     $pn.html("");
 7 |     //     $pn.append($('<li class="nav-small-cap">FEATURED USERS</li>'));
 8 |     //     var users = e.users.filter(e => e.service === "youtube-subscriber-count");
 9 |     //     $.when.apply(null, users.map(e => $.getJSON("https://api.subscribercounter.nl/api/" + e.service + "/" + e.id + "/data"))).done(function () {
10 |     //         for (var x in arguments) {
11 |     //             var f = arguments[x];
12 |     //             if (users.length > 1) {
13 |     //                 f = f[0];
14 |     //             }
15 |     //             if (!f.success) continue;
16 |     //             $li = $("<li>");
17 |     //             $a = $("<a>", {
18 |     //                 class: "waves-effect waves-dark",
19 |     //                 href: "#!/" + f.data.lv_identifier
20 |     //             });
21 |     //             $i = $("<i>", {
22 |     //                 class: "fa fa-user"
23 |     //             });
24 |     //             $a.append($i);
25 |     //             $span = $("<span>", {
26 |     //                 class: "hide-menu"
27 |     //             }).text(f.data.name);
28 |     //             $a.append($span);
29 |     //             $li.append($a);
30 |     //             $pn.append($li);
31 |     //         }
32 |     //         // $pn.append($('<li><a class="waves-effect waves-dark" href="https://promote.counts.live" target="_blank"><i class="fa fa-link"></i><span class="hide-menu">Your Channel Here</span></a></li>'))
33 |     //     });
34 |     // })
35 |   },
36 | };
37 | 


--------------------------------------------------------------------------------
/assets/js/multisearch.core.js:
--------------------------------------------------------------------------------
 1 | YT.multisearch = {
 2 |   getResults: function (e) {
 3 |     $.getJSON(
 4 |       "https://api.subscribercounter.nl/api/youtube-subscriber-count/" + encodeURIComponent(e) + "/search",
 5 |       function (e) {
 6 |         $er = $("#results");
 7 |         $er.html("");
 8 |         e.data.forEach(function (f) {
 9 |           if (f.id == YT.live.channelID) return;
10 |           $er.append(YT.multisearch.giveHtml(f.name, f.picture, f.id));
11 |         });
12 |       },
13 |     );
14 |   },
15 |   giveHtml: function (name, image, id) {
16 |     $e = $("<div>", {
17 |       class: "round align-self-center",
18 |       style: "background: url('" + image + "');background-size:cover;",
19 |     });
20 |     $ee = $("<h3>", {
21 |       class: "m-b-0 font-light",
22 |     }).text(name);
23 |     $f = $("<div>", {
24 |       class: "m-l-10 align-self-center",
25 |     }).append($ee);
26 |     $g = $("<div>", {
27 |       class: "d-flex flex-row",
28 |     });
29 |     $g.append($e).append($f);
30 |     return $("<div>", {
31 |       class: "card-block card m-b-15",
32 |     })
33 |       .append($g)
34 |       .on("click", function () {
35 |         YT.multisearch.launchCompare(id);
36 |       });
37 |   },
38 |   resetCompare: function () {
39 |     $(".super-search,.dark-bg").fadeOut("400", function () {
40 |       $("#results").html("");
41 |       $("#yt_searchvalue_m").val("");
42 |     });
43 |   },
44 |   newSearch: function (e) {
45 |     e.preventDefault();
46 |     YT.multisearch.getResults($("#yt_searchvalue_m").val());
47 |   },
48 |   launchCompare: function (e) {
49 |     if (e == YT.live.channelID) return;
50 |     window.open("/youtube-realtime/compare/#!/" + YT.live.channelID + "$$" + e);
51 |     this.resetCompare();
52 |   },
53 |   bind: function () {
54 |     $("#yt_comrest").on("click", this.resetCompare);
55 |     $("#yt_search_m").on("submit", this.newSearch);
56 |     $("#yt_searchbutton_m").on("click", this.newSearch);
57 |   },
58 | };
59 | 


--------------------------------------------------------------------------------
/assets/js/multisearch.view.js:
--------------------------------------------------------------------------------
 1 | YT.multisearch = {
 2 |   getResults: function (e) {
 3 |     $.getJSON(
 4 |       "https://api.subscribercounter.nl/api/youtube-view-count/" + encodeURIComponent(e) + "/search",
 5 |       function (e) {
 6 |         $er = $("#results");
 7 |         $er.html("");
 8 |         e.data.forEach(function (f) {
 9 |           if (f.id == YT.live.channelID) return;
10 |           $er.append(YT.multisearch.giveHtml(f.name, f.picture, f.id));
11 |         });
12 |       },
13 |     );
14 |   },
15 |   giveHtml: function (name, image, id) {
16 |     $e = $("<div>", {
17 |       class: "round align-self-center",
18 |       style: "background: url('" + image + "');background-size:cover;",
19 |     });
20 |     $ee = $("<h3>", {
21 |       class: "m-b-0 font-light",
22 |     }).text(name);
23 |     $f = $("<div>", {
24 |       class: "m-l-10 align-self-center",
25 |     }).append($ee);
26 |     $g = $("<div>", {
27 |       class: "d-flex flex-row",
28 |     });
29 |     $g.append($e).append($f);
30 |     return $("<div>", {
31 |       class: "card-block card m-b-15",
32 |     })
33 |       .append($g)
34 |       .on("click", function () {
35 |         YT.multisearch.launchCompare(id);
36 |       });
37 |   },
38 |   resetCompare: function () {
39 |     $(".super-search,.dark-bg").fadeOut("400", function () {
40 |       $("#results").html("");
41 |       $("#yt_searchvalue_m").val("");
42 |     });
43 |   },
44 |   newSearch: function (e) {
45 |     e.preventDefault();
46 |     YT.multisearch.getResults($("#yt_searchvalue_m").val());
47 |   },
48 |   launchCompare: function (e) {
49 |     if (e == YT.live.channelID) return;
50 |     window.open("https://counts.live/compare/youtube-view-count/" + YT.live.channelID + "/youtube-view-count/" + e);
51 |     this.resetCompare();
52 |   },
53 |   bind: function () {
54 |     $("#yt_comrest").on("click", this.resetCompare);
55 |     $("#yt_search_m").on("submit", this.newSearch);
56 |     $("#yt_searchbutton_m").on("click", this.newSearch);
57 |   },
58 | };
59 | 


--------------------------------------------------------------------------------
/assets/js/multisearch.vs.js:
--------------------------------------------------------------------------------
 1 | YT.multisearch = {
 2 |   getResults: function (e) {
 3 |     $.getJSON(
 4 |       "https://api.subscribercounter.nl/api/youtube-subscriber-count/" + encodeURIComponent(e) + "/search",
 5 |       function (e) {
 6 |         $er = $("#results");
 7 |         $er.html("");
 8 |         e.data.forEach(function (f) {
 9 |           if (f.id == YT.live.vs1 || f.id == YT.live.vs2) return;
10 |           $er.append(YT.multisearch.giveHtml(f.name, f.picture, f.id));
11 |         });
12 |       },
13 |     );
14 |   },
15 |   giveHtml: function (name, image, id) {
16 |     $e = $("<div>", {
17 |       class: "round align-self-center",
18 |       style: "background: url('" + image + "');background-size:cover;",
19 |     });
20 |     $ee = $("<h3>", {
21 |       class: "m-b-0 font-light",
22 |     }).text(name);
23 |     $f = $("<div>", {
24 |       class: "m-l-10 align-self-center",
25 |     }).append($ee);
26 |     $g = $("<div>", {
27 |       class: "d-flex flex-row",
28 |     });
29 |     $g.append($e).append($f);
30 |     return $("<div>", {
31 |       class: "card-block card m-b-15",
32 |     })
33 |       .append($g)
34 |       .on("click", function () {
35 |         YT.multisearch.changeChannel(id);
36 |       });
37 |   },
38 |   resetCompare: function () {
39 |     $(".super-search,.dark-bg").fadeOut("400", function () {
40 |       $("#results").html("");
41 |       $("#yt_searchvalue_m").val("");
42 |     });
43 |   },
44 |   newSearch: function (e) {
45 |     e.preventDefault();
46 |     YT.multisearch.getResults($("#yt_searchvalue_m").val());
47 |   },
48 |   changeChannel: function (e) {
49 |     if (YT.sharing.changing == null) return;
50 |     if (YT.sharing.changing == "vs1") {
51 |       YT.urls.pushState(e, YT.live.vs2);
52 |     } else {
53 |       YT.urls.pushState(YT.live.vs1, e);
54 |     }
55 |     this.resetCompare();
56 |   },
57 |   bind: function () {
58 |     $("#yt_comrest").on("click", this.resetCompare);
59 |     $("#yt_search_m").on("submit", this.newSearch);
60 |     $("#yt_searchbutton_m").on("click", this.newSearch);
61 |   },
62 | };
63 | 


--------------------------------------------------------------------------------
/assets/js/sharing.vs.js:
--------------------------------------------------------------------------------
 1 | YT.sharing = {
 2 |   changing: null,
 3 |   vs1: function () {
 4 |     window.open(
 5 |       "https://twitter.com/intent/tweet?original_referer=" +
 6 |         YT.sharing.getEncodedURL() +
 7 |         "&ref_src=twsrc%5Etfw&text=" +
 8 |         YT.sharing.getText("vs1") +
 9 |         "&tw_p=tweetbutton&via=iakshatmittal&url=" +
10 |         YT.sharing.getEncodedURL(),
11 |     );
12 |   },
13 |   vs1yt: function () {
14 |     window.open("https://www.youtube.com/channel/" + YT.live.vs1);
15 |   },
16 |   vs2: function () {
17 |     window.open(
18 |       "https://twitter.com/intent/tweet?original_referer=" +
19 |         YT.sharing.getEncodedURL() +
20 |         "&ref_src=twsrc%5Etfw&text=" +
21 |         YT.sharing.getText("vs2") +
22 |         "&tw_p=tweetbutton&via=iakshatmittal&url=" +
23 |         YT.sharing.getEncodedURL(),
24 |     );
25 |   },
26 |   vs2yt: function () {
27 |     window.open("https://www.youtube.com/channel/" + YT.live.vs2);
28 |   },
29 |   getText: function (e) {
30 |     return encodeURIComponent(
31 |       "I support " +
32 |         $("#yt_brand_" + e).text() +
33 |         " in this subscriber count battle of " +
34 |         $("#yt_brand_vs1").text() +
35 |         " vs " +
36 |         $("#yt_brand_vs2").text() +
37 |         " on @YouTube!",
38 |     );
39 |   },
40 |   getEncodedURL: function () {
41 |     return encodeURIComponent(baseURL + "compare/#!/" + YT.live.vs1 + "$$" + YT.live.vs2);
42 |   },
43 |   compare: function () {
44 |     $(".super-search,.dark-bg").fadeIn();
45 |     $("#yt_searchvalue_m").focus();
46 |   },
47 |   vs1change: function () {
48 |     if (isCustomPage) {
49 |       location.replace(baseURL + "compare/#!/" + YT.live.vs1 + "$$" + YT.live.vs2);
50 |       return;
51 |     }
52 |     YT.sharing.changing = "vs1";
53 |     YT.sharing.compare();
54 |   },
55 |   vs2change: function () {
56 |     if (isCustomPage) {
57 |       location.replace(baseURL + "compare/#!/" + YT.live.vs1 + "$$" + YT.live.vs2);
58 |       return;
59 |     }
60 |     YT.sharing.changing = "vs2";
61 |     YT.sharing.compare();
62 |   },
63 |   bind: function () {
64 |     $("#yt_sharevs1").on("click", this.vs1);
65 |     $("#yt_shareyt_vs1").on("click", this.vs1yt);
66 |     $("#yt_compare_vs1").on("click", this.vs1change);
67 | 
68 |     $("#yt_sharevs2").on("click", this.vs2);
69 |     $("#yt_shareyt_vs2").on("click", this.vs2yt);
70 |     $("#yt_compare_vs2").on("click", this.vs2change);
71 |   },
72 | };
73 | 


--------------------------------------------------------------------------------
/assets/css/odometer-theme-custom.css:
--------------------------------------------------------------------------------
 1 | .odometer.odometer-auto-theme,
 2 | .odometer.odometer-theme-minimal {
 3 |   display: block;
 4 | }
 5 | .odometer.odometer-auto-theme .odometer-digit,
 6 | .odometer.odometer-theme-minimal .odometer-digit {
 7 |   display: inline-block;
 8 |   position: relative;
 9 | }
10 | .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
11 | .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
12 |   display: block;
13 |   visibility: hidden;
14 | }
15 | .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
16 | .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
17 |   text-align: left;
18 |   display: block;
19 |   position: absolute;
20 |   top: 0;
21 |   left: 0;
22 |   right: 0;
23 |   bottom: 0;
24 |   overflow: hidden;
25 | }
26 | .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
27 | .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {
28 |   display: block;
29 | }
30 | .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
31 | .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
32 |   display: block;
33 |   -webkit-backface-visibility: hidden;
34 | }
35 | .odometer.odometer-auto-theme .odometer-digit .odometer-value,
36 | .odometer.odometer-theme-minimal .odometer-digit .odometer-value {
37 |   display: block;
38 |   -webkit-transform: translateZ(0);
39 | }
40 | .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,
41 | .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {
42 |   position: absolute;
43 | }
44 | .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
45 | .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
46 |   -webkit-transition: -webkit-transform 0.5s;
47 |   -moz-transition: -moz-transform 0.5s;
48 |   -ms-transition: -ms-transform 0.5s;
49 |   -o-transition: -o-transform 0.5s;
50 |   transition: transform 0.5s;
51 | }
52 | .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
53 | .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
54 | .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner,
55 | .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
56 |   -webkit-transform: translateY(-100%);
57 |   -moz-transform: translateY(-100%);
58 |   -ms-transform: translateY(-100%);
59 |   -o-transform: translateY(-100%);
60 |   transform: translateY(-100%);
61 | }
62 | .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
63 | .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
64 |   -webkit-transition: -webkit-transform 0.5s;
65 |   -moz-transition: -moz-transform 0.5s;
66 |   -ms-transition: -ms-transform 0.5s;
67 |   -o-transition: -o-transform 0.5s;
68 |   transition: transform 0.5s;
69 |   -webkit-transform: translateY(0);
70 |   -moz-transform: translateY(0);
71 |   -ms-transform: translateY(0);
72 |   -o-transform: translateY(0);
73 |   transform: translateY(0);
74 | }
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # YouTube Realtime
 2 | 
 3 | This is a simple experiment which shows the current live subscriber count on YouTube for a user. The count displayed on YouTube is often incorrect because it doesn't update in real time. The count used on this experiment is taken directly from the API and hence is guaranteed to be accurate.
 4 | 
 5 | This page is super light and the follow up network requests are as minimal as possible.
 6 | 
 7 | You can directly bookmark the relevant page to directly jump to a specific user. Sharing features are built right into the web app.
 8 | 
 9 | ![YouTube Realtime Screenshot](res/Example1.png)<br/>
10 | _YouTube Realtime showing YouTube Spotlight_
11 | 
12 | Feel free to submit issues/pull request if you'd like to contribute.
13 | 
14 | I've been seeing a lot of copies of this project on the internet, please consider adding an attribution link if you are planning to deploy this project on your website. If you are a YouTuber, consider using a direct link for your channel instead of creating a new clone website. Thanks!
15 | 
16 | ![YouTube Realtime Screenshot](res/Example2.png)<br/>
17 | _YouTube Realtime showing Justin Bieber_
18 | 
19 | # Features
20 | 
21 | - Realtime Subscriber Count
22 | - Easily compare subscriber counts for any two channels
23 | - Aesthetically pleasing design and colors
24 | - Easy channel selection
25 | - Displays the video count of the user
26 | - Shows total video views of the user
27 | - Shows total comment count of the user
28 | - Easy Sharing built in
29 | - Embeds
30 | - Immersive UI
31 | - Simple custom URLs
32 | 
33 | # Embeds
34 | 
35 | Embedding the counter on your website is a cool way to display the real time count of your channel on your own website. The feature is built right into it, and is available on the website itself. You just need to copy the embed code and paste it as HTML code on your own website. ([Info here.](https://counts.live/embeds))
36 | 
37 | ![YouTube Realtime Embed Small](https://static.counts.live/images/examples/embeds/small.png)<br/>
38 | ![YouTube Realtime Embed Large](https://static.counts.live/images/examples/embeds/large.png)<br/>
39 | _YouTube Realtime Embed_
40 | 
41 | # Try it yourself!
42 | 
43 | - [Sky Does Minecraft](https://akshatmittal.com/youtube-realtime/#!/SkyDoesMinecraft "Sky Does Minecraft's Realtime Subscriber Count on YouTube")
44 | - [Justin Bieber](https://akshatmittal.com/youtube-realtime/#!/UCHkj014U2CQ2Nv0UZeYpE_A "Justin Bieber's Realtime Subscriber Count on YouTube")
45 | - [Smosh](https://akshatmittal.com/youtube-realtime/#!/Smosh "Smosh's Realtime Subscriber Count on YouTube")
46 | - [Marques Brownlee](https://akshatmittal.com/youtube-realtime/#!/MarquesBrownlee "Marques Brownlee's Realtime Subscriber Count on YouTube")
47 | - [YouTube Spotlight](https://akshatmittal.com/youtube-realtime/#!/UCBR8-60-B28hp2BmDPdntcQ "YouTube Spotlight's Realtime Subscriber Count on YouTube")
48 | 
49 | # License
50 | 
51 | YouTube Realtime Copyright (C) 2019 [Akshat Mittal](https://akshatmittal.com/)
52 | 
53 | You may freely modify the code for personal use. You are not allowed to redistribute the project without attribution and credits or prior permission. Commercial use without permission is prohibited.
54 | 
55 | This project uses a part of code from WrapPixel.
56 | 
57 | # Disclaimer
58 | 
59 | The project forks and code by default redirects back to this repo. You can view the instructions to modify the code [here](https://github.com/akshatmittal/youtube-realtime/issues/14#issuecomment-247537299).
60 | 
61 | # Support
62 | 
63 | This project is supported by [Metacrypt](https://www.metacrypt.org/) and [Create My Token](https://www.createmytoken.com/). They provide services such as the [free ERC20 token generator](https://www.createmytoken.com/token-generator/ethereum-erc20-generator/), [free BEP20 token generator](https://www.createmytoken.com/token-generator/bnb-smart-chain-bep20-generator/) and [free Solana SPL Token Creator](https://www.createmytoken.com/solana-token-creator/spl-token/).
64 | 


--------------------------------------------------------------------------------
/assets/css/colors/light.css:
--------------------------------------------------------------------------------
  1 | .preloader {
  2 |   width: 100%;
  3 |   height: 100%;
  4 |   top: 0px;
  5 |   position: fixed;
  6 |   z-index: 99999;
  7 |   background: #fff;
  8 | }
  9 | 
 10 | .preloader .cssload-speeding-wheel {
 11 |   position: absolute;
 12 |   top: calc(50% - 3.5px);
 13 |   left: calc(50% - 3.5px);
 14 | }
 15 | 
 16 | /*******************
 17 | /*Top bar
 18 | *******************/
 19 | 
 20 | .topbar {
 21 |   background: #f62d51;
 22 |   /* Old browsers */
 23 |   background: -moz-linear-gradient(left, #f62d51 0%, #660fb5 100%);
 24 |   /* FF3.6-15 */
 25 |   background: -webkit-linear-gradient(left, #f62d51 0%, #660fb5 100%);
 26 |   /* Chrome10-25,Safari5.1-6 */
 27 |   background: linear-gradient(to right, #f62d51 0%, #660fb5 100%);
 28 |   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 29 | }
 30 | 
 31 | .topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
 32 |   display: none;
 33 | }
 34 | 
 35 | .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
 36 |   display: inline-block;
 37 |   color: rgba(255, 255, 255, 0.8);
 38 | }
 39 | 
 40 | .topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
 41 |   color: rgba(255, 255, 255, 0.8) !important;
 42 | }
 43 | 
 44 | .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
 45 | .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
 46 |   color: #ffffff !important;
 47 | }
 48 | 
 49 | /*******************
 50 | /*General Elements
 51 | *******************/
 52 | 
 53 | a {
 54 |   color: #f62d51;
 55 | }
 56 | 
 57 | a.link:hover,
 58 | a.link:focus {
 59 |   color: #f62d51 !important;
 60 | }
 61 | 
 62 | .bg-theme {
 63 |   background-color: #f62d51 !important;
 64 | }
 65 | 
 66 | .pagination > .active > a,
 67 | .pagination > .active > span,
 68 | .pagination > .active > a:hover,
 69 | .pagination > .active > span:hover,
 70 | .pagination > .active > a:focus,
 71 | .pagination > .active > span:focus {
 72 |   background-color: #f62d51;
 73 |   border-color: #f62d51;
 74 | }
 75 | 
 76 | .right-sidebar .rpanel-title {
 77 |   background: #f62d51;
 78 | }
 79 | 
 80 | .stylish-table tbody tr:hover,
 81 | .stylish-table tbody tr.active {
 82 |   border-left: 4px solid #f62d51;
 83 | }
 84 | 
 85 | .text-themecolor {
 86 |   color: #f62d51 !important;
 87 | }
 88 | 
 89 | .profile-tab li a.nav-link.active,
 90 | .customtab li a.nav-link.active {
 91 |   border-bottom: 2px solid #f62d51;
 92 |   color: #f62d51;
 93 | }
 94 | 
 95 | .profile-tab li a.nav-link:hover,
 96 | .customtab li a.nav-link:hover {
 97 |   color: #f62d51;
 98 | }
 99 | 
100 | /*******************
101 | /*Buttons
102 | *******************/
103 | 
104 | .btn-themecolor,
105 | .btn-themecolor.disabled {
106 |   background: #f62d51;
107 |   color: #ffffff;
108 |   border: 1px solid #f62d51;
109 | }
110 | 
111 | .btn-themecolor:hover,
112 | .btn-themecolor.disabled:hover {
113 |   background: #f62d51;
114 |   opacity: 0.7;
115 |   border: 1px solid #f62d51;
116 | }
117 | 
118 | .btn-themecolor.active,
119 | .btn-themecolor:focus,
120 | .btn-themecolor.disabled.active,
121 | .btn-themecolor.disabled:focus {
122 |   background: #028ee1;
123 | }
124 | 
125 | /*******************
126 | /*sidebar navigation
127 | *******************/
128 | 
129 | .sidebar-nav {
130 |   background: #fff;
131 | }
132 | 
133 | .sidebar-nav ul li a {
134 |   color: #607d8b;
135 | }
136 | 
137 | .sidebar-nav ul li a.active,
138 | .sidebar-nav ul li a:hover {
139 |   color: #f62d51;
140 | }
141 | 
142 | .sidebar-nav ul li a.active {
143 |   color: #263238;
144 | }
145 | 
146 | .sidebar-nav ul li.nav-small-cap {
147 |   color: #99abb4;
148 | }
149 | 
150 | .sidebar-nav > ul > li.active > a,
151 | .sidebar-nav > ul > li.active:hover > a {
152 |   color: #ffffff !important;
153 |   background: #f62d51 !important;
154 | }
155 | 
156 | .sidebar-nav > ul > li.active > a i,
157 | .sidebar-nav > ul > li.active:hover > a i {
158 |   color: #ffffff !important;
159 | }
160 | 
161 | .sidebar-nav > ul > li.active > a:after,
162 | .sidebar-nav > ul > li.active:hover > a:after {
163 |   border-color: #ffffff;
164 | }
165 | 
166 | .sidebar-nav > ul > li > a.active i,
167 | .sidebar-nav > ul > li > a:hover i {
168 |   color: #f62d51;
169 | }
170 | 
171 | .sidebar-nav > ul > li > a i {
172 |   color: #99abb4;
173 | }
174 | 
175 | .sidebar-nav > ul > li > a.active {
176 |   font-weight: 400;
177 |   background: #ffffff;
178 |   color: #f62d51;
179 | }
180 | 


--------------------------------------------------------------------------------
/assets/js/waves.js:
--------------------------------------------------------------------------------
  1 | !(function (t) {
  2 |   "use strict";
  3 |   function e(t) {
  4 |     return null !== t && t === t.window;
  5 |   }
  6 |   function n(t) {
  7 |     return e(t) ? t : 9 === t.nodeType && t.defaultView;
  8 |   }
  9 |   function a(t) {
 10 |     var e,
 11 |       a,
 12 |       i = { top: 0, left: 0 },
 13 |       o = t && t.ownerDocument;
 14 |     return (
 15 |       (e = o.documentElement),
 16 |       "undefined" != typeof t.getBoundingClientRect && (i = t.getBoundingClientRect()),
 17 |       (a = n(o)),
 18 |       { top: i.top + a.pageYOffset - e.clientTop, left: i.left + a.pageXOffset - e.clientLeft }
 19 |     );
 20 |   }
 21 |   function i(t) {
 22 |     var e = "";
 23 |     for (var n in t) t.hasOwnProperty(n) && (e += n + ":" + t[n] + ";");
 24 |     return e;
 25 |   }
 26 |   function o(t) {
 27 |     if (d.allowEvent(t) === !1) return null;
 28 |     for (var e = null, n = t.target || t.srcElement; null !== n.parentElement; ) {
 29 |       if (!(n instanceof SVGElement || -1 === n.className.indexOf("waves-effect"))) {
 30 |         e = n;
 31 |         break;
 32 |       }
 33 |       if (n.classList.contains("waves-effect")) {
 34 |         e = n;
 35 |         break;
 36 |       }
 37 |       n = n.parentElement;
 38 |     }
 39 |     return e;
 40 |   }
 41 |   function r(e) {
 42 |     var n = o(e);
 43 |     null !== n &&
 44 |       (c.show(e, n),
 45 |       "ontouchstart" in t &&
 46 |         (n.addEventListener("touchend", c.hide, !1), n.addEventListener("touchcancel", c.hide, !1)),
 47 |       n.addEventListener("mouseup", c.hide, !1),
 48 |       n.addEventListener("mouseleave", c.hide, !1));
 49 |   }
 50 |   var s = s || {},
 51 |     u = document.querySelectorAll.bind(document),
 52 |     c = {
 53 |       duration: 750,
 54 |       show: function (t, e) {
 55 |         if (2 === t.button) return !1;
 56 |         var n = e || this,
 57 |           o = document.createElement("div");
 58 |         (o.className = "waves-ripple"), n.appendChild(o);
 59 |         var r = a(n),
 60 |           s = t.pageY - r.top,
 61 |           u = t.pageX - r.left,
 62 |           d = "scale(" + (n.clientWidth / 100) * 10 + ")";
 63 |         "touches" in t && ((s = t.touches[0].pageY - r.top), (u = t.touches[0].pageX - r.left)),
 64 |           o.setAttribute("data-hold", Date.now()),
 65 |           o.setAttribute("data-scale", d),
 66 |           o.setAttribute("data-x", u),
 67 |           o.setAttribute("data-y", s);
 68 |         var l = { top: s + "px", left: u + "px" };
 69 |         (o.className = o.className + " waves-notransition"),
 70 |           o.setAttribute("style", i(l)),
 71 |           (o.className = o.className.replace("waves-notransition", "")),
 72 |           (l["-webkit-transform"] = d),
 73 |           (l["-moz-transform"] = d),
 74 |           (l["-ms-transform"] = d),
 75 |           (l["-o-transform"] = d),
 76 |           (l.transform = d),
 77 |           (l.opacity = "1"),
 78 |           (l["-webkit-transition-duration"] = c.duration + "ms"),
 79 |           (l["-moz-transition-duration"] = c.duration + "ms"),
 80 |           (l["-o-transition-duration"] = c.duration + "ms"),
 81 |           (l["transition-duration"] = c.duration + "ms"),
 82 |           (l["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"),
 83 |           (l["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"),
 84 |           (l["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"),
 85 |           (l["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"),
 86 |           o.setAttribute("style", i(l));
 87 |       },
 88 |       hide: function (t) {
 89 |         d.touchup(t);
 90 |         var e = this,
 91 |           n = (1.4 * e.clientWidth, null),
 92 |           a = e.getElementsByClassName("waves-ripple");
 93 |         if (!(a.length > 0)) return !1;
 94 |         n = a[a.length - 1];
 95 |         var o = n.getAttribute("data-x"),
 96 |           r = n.getAttribute("data-y"),
 97 |           s = n.getAttribute("data-scale"),
 98 |           u = Date.now() - Number(n.getAttribute("data-hold")),
 99 |           l = 350 - u;
100 |         0 > l && (l = 0),
101 |           setTimeout(function () {
102 |             var t = {
103 |               top: r + "px",
104 |               left: o + "px",
105 |               opacity: "0",
106 |               "-webkit-transition-duration": c.duration + "ms",
107 |               "-moz-transition-duration": c.duration + "ms",
108 |               "-o-transition-duration": c.duration + "ms",
109 |               "transition-duration": c.duration + "ms",
110 |               "-webkit-transform": s,
111 |               "-moz-transform": s,
112 |               "-ms-transform": s,
113 |               "-o-transform": s,
114 |               transform: s,
115 |             };
116 |             n.setAttribute("style", i(t)),
117 |               setTimeout(function () {
118 |                 try {
119 |                   e.removeChild(n);
120 |                 } catch (t) {
121 |                   return !1;
122 |                 }
123 |               }, c.duration);
124 |           }, l);
125 |       },
126 |       wrapInput: function (t) {
127 |         for (var e = 0; e < t.length; e++) {
128 |           var n = t[e];
129 |           if ("input" === n.tagName.toLowerCase()) {
130 |             var a = n.parentNode;
131 |             if ("i" === a.tagName.toLowerCase() && -1 !== a.className.indexOf("waves-effect")) continue;
132 |             var i = document.createElement("i");
133 |             i.className = n.className + " waves-input-wrapper";
134 |             var o = n.getAttribute("style");
135 |             o || (o = ""),
136 |               i.setAttribute("style", o),
137 |               (n.className = "waves-button-input"),
138 |               n.removeAttribute("style"),
139 |               a.replaceChild(i, n),
140 |               i.appendChild(n);
141 |           }
142 |         }
143 |       },
144 |     },
145 |     d = {
146 |       touches: 0,
147 |       allowEvent: function (t) {
148 |         var e = !0;
149 |         return (
150 |           "touchstart" === t.type
151 |             ? (d.touches += 1)
152 |             : "touchend" === t.type || "touchcancel" === t.type
153 |             ? setTimeout(function () {
154 |                 d.touches > 0 && (d.touches -= 1);
155 |               }, 500)
156 |             : "mousedown" === t.type && d.touches > 0 && (e = !1),
157 |           e
158 |         );
159 |       },
160 |       touchup: function (t) {
161 |         d.allowEvent(t);
162 |       },
163 |     };
164 |   (s.displayEffect = function (e) {
165 |     (e = e || {}),
166 |       "duration" in e && (c.duration = e.duration),
167 |       c.wrapInput(u(".waves-effect")),
168 |       "ontouchstart" in t && document.body.addEventListener("touchstart", r, !1),
169 |       document.body.addEventListener("mousedown", r, !1);
170 |   }),
171 |     (s.attach = function (e) {
172 |       "input" === e.tagName.toLowerCase() && (c.wrapInput([e]), (e = e.parentElement)),
173 |         "ontouchstart" in t && e.addEventListener("touchstart", r, !1),
174 |         e.addEventListener("mousedown", r, !1);
175 |     }),
176 |     (t.Waves = s),
177 |     document.addEventListener(
178 |       "DOMContentLoaded",
179 |       function () {
180 |         s.displayEffect();
181 |       },
182 |       !1,
183 |     );
184 | })(window);
185 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
   1 | * {
   2 |   outline: none;
   3 | }
   4 | 
   5 | .nosel *:not(input):not(textarea):not(a) {
   6 |   /*
   7 |   ** :not(input, textarea, a) is not supported by all browsers
   8 |   */
   9 |   user-select: none;
  10 |   cursor: default;
  11 | }
  12 | 
  13 | .selcl * {
  14 |   cursor: pointer;
  15 | }
  16 | 
  17 | body {
  18 |   background: #fff;
  19 |   font-family: "Roboto", sans-serif;
  20 |   margin: 0;
  21 |   overflow-x: hidden;
  22 |   color: #67757c;
  23 |   font-weight: 400;
  24 | }
  25 | 
  26 | html {
  27 |   position: relative;
  28 |   min-height: 100%;
  29 |   background: #ffffff;
  30 | }
  31 | 
  32 | a:hover,
  33 | a:focus {
  34 |   text-decoration: none;
  35 | }
  36 | 
  37 | .img-responsive {
  38 |   max-width: 100%;
  39 |   height: auto;
  40 |   display: inline-block;
  41 | }
  42 | 
  43 | h1,
  44 | h2,
  45 | h3,
  46 | h4,
  47 | h5,
  48 | h6 {
  49 |   color: #455a64;
  50 |   font-family: "Roboto", sans-serif;
  51 |   font-weight: 400;
  52 | }
  53 | 
  54 | h1 {
  55 |   line-height: 40px;
  56 |   font-size: 36px;
  57 | }
  58 | 
  59 | h3 {
  60 |   line-height: 30px;
  61 |   font-size: 21px;
  62 | }
  63 | 
  64 | h4 {
  65 |   line-height: 22px;
  66 |   font-size: 18px;
  67 | }
  68 | 
  69 | h5 {
  70 |   line-height: 18px;
  71 |   font-size: 16px;
  72 |   font-weight: 400;
  73 | }
  74 | 
  75 | h6 {
  76 |   line-height: 16px;
  77 |   font-size: 14px;
  78 |   font-weight: 400;
  79 | }
  80 | 
  81 | .display-1 {
  82 |   font-size: 8rem;
  83 | }
  84 | 
  85 | .display-1.views {
  86 |   font-size: 6rem;
  87 | }
  88 | 
  89 | .display-5 {
  90 |   font-size: 2.8rem;
  91 |   font-weight: 300;
  92 |   line-height: 1.1;
  93 | }
  94 | 
  95 | .display-6 {
  96 |   font-size: 36px;
  97 | }
  98 | 
  99 | html body .p-t-0 {
 100 |   padding-top: 0px;
 101 | }
 102 | 
 103 | html body .p-b-0 {
 104 |   padding-bottom: 0px;
 105 |   z-index: 2;
 106 | }
 107 | 
 108 | html body .m-l-10 {
 109 |   margin-left: 10px;
 110 | }
 111 | 
 112 | html body .m-t-10 {
 113 |   margin-top: 10px;
 114 | }
 115 | 
 116 | html body .m-t-20 {
 117 |   margin-top: 20px;
 118 | }
 119 | 
 120 | html body .m-b-0 {
 121 |   margin-bottom: 0px;
 122 | }
 123 | 
 124 | html body .m-b-15 {
 125 |   margin-bottom: 15px;
 126 | }
 127 | 
 128 | html body .font-light {
 129 |   font-weight: 300;
 130 | }
 131 | 
 132 | .text-white {
 133 |   color: #ffffff !important;
 134 | }
 135 | 
 136 | .text-muted {
 137 |   color: #99abb4 !important;
 138 | }
 139 | 
 140 | .round {
 141 |   line-height: 48px;
 142 |   color: #ffffff;
 143 |   width: 45px;
 144 |   height: 45px;
 145 |   display: inline-block;
 146 |   font-weight: 400;
 147 |   text-align: center;
 148 |   border-radius: 100%;
 149 |   background: #1e88e5;
 150 | }
 151 | 
 152 | .round img {
 153 |   border-radius: 100%;
 154 | }
 155 | 
 156 | .round-lg {
 157 |   line-height: 65px;
 158 |   width: 60px;
 159 |   height: 60px;
 160 |   font-size: 30px;
 161 | }
 162 | 
 163 | .round.round-info {
 164 |   background: #1e88e5;
 165 | }
 166 | 
 167 | .round.round-danger {
 168 |   background: #fc4b6c;
 169 | }
 170 | 
 171 | .table td,
 172 | .table th {
 173 |   border-color: #f3f1f1;
 174 | }
 175 | 
 176 | .table thead th,
 177 | .table th {
 178 |   font-weight: 500;
 179 | }
 180 | 
 181 | .waves-effect {
 182 |   position: relative;
 183 |   cursor: pointer;
 184 |   overflow: hidden;
 185 |   -webkit-user-select: none;
 186 |   -moz-user-select: none;
 187 |   -ms-user-select: none;
 188 |   user-select: none;
 189 |   -webkit-tap-highlight-color: transparent;
 190 |   vertical-align: middle;
 191 |   z-index: 1;
 192 |   will-change: opacity, transform;
 193 |   -webkit-transition: all 0.1s ease-out;
 194 |   -moz-transition: all 0.1s ease-out;
 195 |   -o-transition: all 0.1s ease-out;
 196 |   -ms-transition: all 0.1s ease-out;
 197 |   transition: all 0.1s ease-out;
 198 | }
 199 | 
 200 | .waves-effect .waves-ripple {
 201 |   position: absolute;
 202 |   border-radius: 50%;
 203 |   width: 20px;
 204 |   height: 20px;
 205 |   margin-top: -10px;
 206 |   margin-left: -10px;
 207 |   opacity: 0;
 208 |   background: rgba(0, 0, 0, 0.2);
 209 |   -webkit-transition: all 0.7s ease-out;
 210 |   -moz-transition: all 0.7s ease-out;
 211 |   -o-transition: all 0.7s ease-out;
 212 |   -ms-transition: all 0.7s ease-out;
 213 |   transition: all 0.7s ease-out;
 214 |   -webkit-transition-property: -webkit-transform, opacity;
 215 |   -moz-transition-property: -moz-transform, opacity;
 216 |   -o-transition-property: -o-transform, opacity;
 217 |   -webkit-transition-property: opacity, -webkit-transform;
 218 |   transition-property: opacity, -webkit-transform;
 219 |   -o-transition-property: transform, opacity;
 220 |   transition-property: transform, opacity;
 221 |   transition-property: transform, opacity, -webkit-transform;
 222 |   -webkit-transform: scale(0);
 223 |   -moz-transform: scale(0);
 224 |   -ms-transform: scale(0);
 225 |   -o-transform: scale(0);
 226 |   transform: scale(0);
 227 |   pointer-events: none;
 228 | }
 229 | 
 230 | .btn {
 231 |   padding: 7px 12px;
 232 |   font-size: 14px;
 233 |   cursor: pointer;
 234 | }
 235 | 
 236 | .btn-success,
 237 | .btn-success.disabled {
 238 |   background: #26c6da;
 239 |   border: 1px solid #26c6da;
 240 |   -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2),
 241 |     0 1px 5px 0 rgba(40, 190, 189, 0.12);
 242 |   box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2),
 243 |     0 1px 5px 0 rgba(40, 190, 189, 0.12);
 244 |   -webkit-transition: 0.2s ease-in;
 245 |   -o-transition: 0.2s ease-in;
 246 |   transition: 0.2s ease-in;
 247 | }
 248 | 
 249 | .btn-success:hover,
 250 | .btn-success.disabled:hover {
 251 |   background: #26c6da;
 252 |   -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 253 |     0 8px 10px -5px rgba(40, 190, 189, 0.2);
 254 |   box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 255 |     0 8px 10px -5px rgba(40, 190, 189, 0.2);
 256 |   border: 1px solid #26c6da;
 257 | }
 258 | 
 259 | .btn-success.active,
 260 | .btn-success:focus,
 261 | .btn-success.disabled.active,
 262 | .btn-success.disabled:focus {
 263 |   background: #1eacbe;
 264 |   -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 265 |     0 8px 10px -5px rgba(40, 190, 189, 0.2);
 266 |   box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 267 |     0 8px 10px -5px rgba(40, 190, 189, 0.2);
 268 | }
 269 | 
 270 | .btn-info,
 271 | .btn-info.disabled {
 272 |   background: #1e88e5;
 273 |   border: 1px solid #1e88e5;
 274 |   -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2),
 275 |     0 1px 5px 0 rgba(66, 165, 245, 0.12);
 276 |   box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2),
 277 |     0 1px 5px 0 rgba(66, 165, 245, 0.12);
 278 |   -webkit-transition: 0.2s ease-in;
 279 |   -o-transition: 0.2s ease-in;
 280 |   transition: 0.2s ease-in;
 281 | }
 282 | 
 283 | .btn-info:hover,
 284 | .btn-info.disabled:hover {
 285 |   background: #1e88e5;
 286 |   border: 1px solid #1e88e5;
 287 |   -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 288 |     0 8px 10px -5px rgba(23, 105, 255, 0.2);
 289 |   box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 290 |     0 8px 10px -5px rgba(23, 105, 255, 0.2);
 291 | }
 292 | 
 293 | .btn-info.active,
 294 | .btn-info:focus,
 295 | .btn-info.disabled.active,
 296 | .btn-info.disabled:focus {
 297 |   background: #028ee1;
 298 |   -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 299 |     0 8px 10px -5px rgba(23, 105, 255, 0.2);
 300 |   box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 301 |     0 8px 10px -5px rgba(23, 105, 255, 0.2);
 302 | }
 303 | 
 304 | .btn-danger,
 305 | .btn-danger.disabled {
 306 |   background: #fc4b6c;
 307 |   border: 1px solid #fc4b6c;
 308 |   -webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2),
 309 |     0 1px 5px 0 rgba(239, 83, 80, 0.12);
 310 |   box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2),
 311 |     0 1px 5px 0 rgba(239, 83, 80, 0.12);
 312 |   -webkit-transition: 0.2s ease-in;
 313 |   -o-transition: 0.2s ease-in;
 314 |   transition: 0.2s ease-in;
 315 | }
 316 | 
 317 | .btn-danger:hover,
 318 | .btn-danger.disabled:hover {
 319 |   background: #fc4b6c;
 320 |   -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 321 |     0 8px 10px -5px rgba(239, 83, 80, 0.2);
 322 |   box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 323 |     0 8px 10px -5px rgba(239, 83, 80, 0.2);
 324 |   border: 1px solid #fc4b6c;
 325 | }
 326 | 
 327 | .btn-danger.active,
 328 | .btn-danger:focus,
 329 | .btn-danger.disabled.active,
 330 | .btn-danger.disabled:focus {
 331 |   background: #e6294b;
 332 |   -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 333 |     0 8px 10px -5px rgba(239, 83, 80, 0.2);
 334 |   box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12),
 335 |     0 8px 10px -5px rgba(239, 83, 80, 0.2);
 336 | }
 337 | 
 338 | .btn-archive {
 339 |   color: #ffffff;
 340 |   background-color: #e95512;
 341 | }
 342 | 
 343 | .btn-twitter {
 344 |   color: #ffffff;
 345 |   background-color: #55acee;
 346 | }
 347 | 
 348 | .btn-instagram {
 349 |   background-color: #e4405f;
 350 | }
 351 | 
 352 | .btn-compare {
 353 |   color: #ffffff;
 354 |   background-color: #009efb;
 355 | }
 356 | 
 357 | .btn-youtube {
 358 |   color: #ffffff;
 359 |   background-color: #dd0000;
 360 | }
 361 | 
 362 | textarea {
 363 |   resize: none;
 364 | }
 365 | 
 366 | .form-control {
 367 |   color: #67757c;
 368 |   min-height: 38px;
 369 |   display: initial;
 370 | }
 371 | 
 372 | .form-control:disabled,
 373 | .form-control[readonly] {
 374 |   opacity: 0.7;
 375 | }
 376 | 
 377 | .form-group {
 378 |   margin-bottom: 1.25rem;
 379 | }
 380 | 
 381 | .card-no-border .card {
 382 |   border-color: #d7dfe3;
 383 |   border-radius: 4px;
 384 |   -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
 385 |   box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
 386 |   overflow: hidden;
 387 | }
 388 | 
 389 | #main-wrapper {
 390 |   width: 100%;
 391 | }
 392 | 
 393 | .page-wrapper {
 394 |   background: #eef5f9;
 395 |   padding-bottom: 60px;
 396 |   padding-top: 70px;
 397 | }
 398 | 
 399 | .topbar {
 400 |   position: fixed;
 401 |   width: 100%;
 402 |   z-index: 50;
 403 |   -webkit-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
 404 |   box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
 405 | }
 406 | 
 407 | .topbar .top-navbar {
 408 |   min-height: 70px;
 409 |   padding: 0px 15px 0 0;
 410 | }
 411 | 
 412 | .topbar .top-navbar .navbar-header {
 413 |   line-height: 65px;
 414 |   text-align: center;
 415 | }
 416 | 
 417 | .topbar .top-navbar .navbar-header .navbar-brand {
 418 |   margin-right: 0px;
 419 |   padding-bottom: 0px;
 420 |   padding-top: 0px;
 421 | }
 422 | 
 423 | .topbar .top-navbar .navbar-header .navbar-brand b {
 424 |   line-height: 70px;
 425 |   display: inline-block;
 426 | }
 427 | 
 428 | .topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
 429 |   padding-left: 0.75rem;
 430 |   padding-right: 0.75rem;
 431 |   font-size: 19px;
 432 |   line-height: 50px;
 433 | }
 434 | 
 435 | .mini-sidebar .top-navbar .navbar-header {
 436 |   width: 60px;
 437 |   text-align: center;
 438 | }
 439 | 
 440 | .footer {
 441 |   bottom: 0;
 442 |   color: #67757c;
 443 |   left: 0px;
 444 |   padding: 17px 15px;
 445 |   position: absolute;
 446 |   right: 0;
 447 |   border-top: 1px solid rgba(120, 130, 140, 0.13);
 448 |   background: #ffffff;
 449 | }
 450 | 
 451 | .card {
 452 |   margin-bottom: 1.25rem;
 453 | }
 454 | 
 455 | .card.no-shadow {
 456 |   box-shadow: none !important;
 457 | }
 458 | 
 459 | .card .card-subtitle {
 460 |   font-weight: 300;
 461 |   margin-bottom: 15px;
 462 |   color: #99abb4;
 463 | }
 464 | 
 465 | .form-material .form-group {
 466 |   overflow: hidden;
 467 | }
 468 | 
 469 | .form-material .form-control {
 470 |   background-color: transparent;
 471 |   background-position: center bottom, center calc(100% - 1px);
 472 |   background-repeat: no-repeat;
 473 |   background-size: 0 2px, 100% 1px;
 474 |   padding: 0;
 475 |   -webkit-transition: background 0s ease-out 0s;
 476 |   -o-transition: background 0s ease-out 0s;
 477 |   transition: background 0s ease-out 0s;
 478 | }
 479 | 
 480 | .form-material .form-control,
 481 | .form-material .form-control.focus,
 482 | .form-material .form-control:focus {
 483 |   background-image: -webkit-gradient(linear, left top, left bottom, from(#009efb), to(#009efb)),
 484 |     -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
 485 |   background-image: -webkit-linear-gradient(#009efb, #009efb), -webkit-linear-gradient(#d9d9d9, #d9d9d9);
 486 |   background-image: -o-linear-gradient(#009efb, #009efb), -o-linear-gradient(#d9d9d9, #d9d9d9);
 487 |   background-image: linear-gradient(#009efb, #009efb), linear-gradient(#d9d9d9, #d9d9d9);
 488 |   border: 0 none;
 489 |   border-radius: 0;
 490 |   -webkit-box-shadow: none;
 491 |   box-shadow: none;
 492 |   float: none;
 493 | }
 494 | 
 495 | table th {
 496 |   font-weight: 400;
 497 | }
 498 | 
 499 | .table thead th,
 500 | .table th {
 501 |   border: 0px;
 502 | }
 503 | 
 504 | .color-table.red-table thead th {
 505 |   background-color: #fb3a3a;
 506 |   color: #ffffff;
 507 | }
 508 | 
 509 | .left-sidebar {
 510 |   position: absolute;
 511 |   width: 240px;
 512 |   height: 100%;
 513 |   top: 0px;
 514 |   z-index: 20;
 515 |   padding-top: 70px;
 516 |   background: #fff;
 517 |   -webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
 518 |   box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
 519 | }
 520 | 
 521 | .fix-sidebar .left-sidebar {
 522 |   position: fixed;
 523 | }
 524 | 
 525 | .scroll-sidebar {
 526 |   padding-bottom: 60px;
 527 | }
 528 | 
 529 | .collapse.in {
 530 |   display: block;
 531 | }
 532 | 
 533 | /*******************
 534 | sidebar navigation
 535 | ******************/
 536 | 
 537 | .scroll-sidebar {
 538 |   padding-bottom: 60px;
 539 | }
 540 | 
 541 | .collapse.in {
 542 |   display: block;
 543 | }
 544 | 
 545 | .sidebar-nav {
 546 |   background: #fff;
 547 |   padding: 0 12px;
 548 | }
 549 | 
 550 | .sidebar-nav ul {
 551 |   margin: 0px;
 552 |   padding: 0px;
 553 | }
 554 | 
 555 | .sidebar-nav ul li {
 556 |   list-style: none;
 557 | }
 558 | 
 559 | .sidebar-nav ul li a {
 560 |   color: #607d8b;
 561 |   padding: 8px 35px 8px 15px;
 562 |   display: block;
 563 |   font-size: 15px;
 564 |   border-radius: 4px;
 565 |   white-space: nowrap;
 566 | }
 567 | 
 568 | .sidebar-nav ul li a.active,
 569 | .sidebar-nav ul li a:hover {
 570 |   color: #26c6da;
 571 | }
 572 | 
 573 | .sidebar-nav ul li a.active {
 574 |   font-weight: 500;
 575 |   color: #263238;
 576 | }
 577 | 
 578 | .sidebar-nav ul li ul {
 579 |   padding-left: 5px;
 580 |   padding-top: 10px;
 581 | }
 582 | 
 583 | .sidebar-nav ul li ul li a {
 584 |   padding: 10px 35px 10px 15px;
 585 | }
 586 | 
 587 | .sidebar-nav ul li ul ul {
 588 |   padding-left: 15px;
 589 | }
 590 | 
 591 | .sidebar-nav ul li.nav-small-cap {
 592 |   font-size: 12px;
 593 |   margin-bottom: 0px;
 594 |   padding: 14px 14px 14px 20px;
 595 |   color: #263238;
 596 |   font-weight: 500;
 597 | }
 598 | 
 599 | .sidebar-nav ul li.nav-devider {
 600 |   height: 1px;
 601 |   background: rgba(120, 130, 140, 0.13);
 602 |   display: block;
 603 |   margin: 20px 0;
 604 | }
 605 | 
 606 | .sidebar-nav > ul > li {
 607 |   margin-bottom: 10px;
 608 | }
 609 | 
 610 | .sidebar-nav > ul > li.active > a {
 611 |   color: #ffffff;
 612 |   font-weight: 500;
 613 |   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 614 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 615 | }
 616 | 
 617 | .sidebar-nav > ul > li.active > a i {
 618 |   color: #26c6da;
 619 | }
 620 | 
 621 | .sidebar-nav > ul > li > a.active i,
 622 | .sidebar-nav > ul > li > a:hover i {
 623 |   color: #26c6da;
 624 | }
 625 | 
 626 | .sidebar-nav > ul > li > a i {
 627 |   width: 27px;
 628 |   height: 27px;
 629 |   font-size: 21px;
 630 |   display: inline-block;
 631 |   vertical-align: middle;
 632 |   color: #99abb4;
 633 | }
 634 | 
 635 | .sidebar-nav > ul > li > a .label {
 636 |   float: right;
 637 |   margin-top: 6px;
 638 | }
 639 | 
 640 | .sidebar-nav > ul > li > a.active {
 641 |   font-weight: 400;
 642 |   background: #ffffff;
 643 |   color: #26c6da;
 644 | }
 645 | 
 646 | .sidebar-nav .has-arrow {
 647 |   position: relative;
 648 | }
 649 | 
 650 | .sidebar-nav .has-arrow::after {
 651 |   position: absolute;
 652 |   content: "";
 653 |   width: 0.55em;
 654 |   height: 0.55em;
 655 |   border-width: 1px 0 0 1px;
 656 |   border-style: solid;
 657 |   border-color: #607d8b;
 658 |   right: 1em;
 659 |   -webkit-transform: rotate(-45deg) translate(0, -50%);
 660 |   -ms-transform: rotate(-45deg) translate(0, -50%);
 661 |   -o-transform: rotate(-45deg) translate(0, -50%);
 662 |   transform: rotate(-45deg) translate(0, -50%);
 663 |   -webkit-transform-origin: top;
 664 |   -ms-transform-origin: top;
 665 |   -o-transform-origin: top;
 666 |   transform-origin: top;
 667 |   top: 47%;
 668 |   -webkit-transition: all 0.3s ease-out;
 669 |   -o-transition: all 0.3s ease-out;
 670 |   transition: all 0.3s ease-out;
 671 | }
 672 | 
 673 | .sidebar-nav .active > .has-arrow::after,
 674 | .sidebar-nav li > .has-arrow.active::after,
 675 | .sidebar-nav .has-arrow[aria-expanded="true"]::after {
 676 |   -webkit-transform: rotate(-135deg) translate(0, -50%);
 677 |   -ms-transform: rotate(-135deg) translate(0, -50%);
 678 |   -o-transform: rotate(-135deg) translate(0, -50%);
 679 |   top: 45%;
 680 |   width: 0.58em;
 681 |   transform: rotate(-135deg) translate(0, -50%);
 682 | }
 683 | 
 684 | /****************
 685 |   When click on sidebar toggler and also for tablet
 686 |   *****************/
 687 | 
 688 | @media (min-width: 768px) {
 689 |   .mini-sidebar .sidebar-nav .sidebarnav li {
 690 |     position: relative;
 691 |   }
 692 | 
 693 |   .mini-sidebar .sidebar-nav .sidebarnav > li > ul {
 694 |     position: absolute;
 695 |     left: 60px;
 696 |     top: 45px;
 697 |     width: 200px;
 698 |     z-index: 1001;
 699 |     background: #f2f6f8;
 700 |     display: none;
 701 |     padding-left: 1px;
 702 |   }
 703 | 
 704 |   .mini-sidebar .sidebar-nav {
 705 |     padding: 5px;
 706 |   }
 707 | 
 708 |   .mini-sidebar .sidebar-nav .sidebarnav > li:hover > ul {
 709 |     height: auto !important;
 710 |     overflow: auto;
 711 |   }
 712 | 
 713 |   .mini-sidebar .sidebar-nav .sidebarnav > li:hover > ul,
 714 |   .mini-sidebar .sidebar-nav .sidebarnav > li:hover > ul.collapse {
 715 |     display: block;
 716 |   }
 717 | 
 718 |   .mini-sidebar .sidebar-nav .sidebarnav > li > a.has-arrow:after {
 719 |     display: none;
 720 |   }
 721 | 
 722 |   .mini-sidebar .left-sidebar {
 723 |     width: 60px;
 724 |   }
 725 | 
 726 |   .mini-sidebar .user-profile {
 727 |     padding-bottom: 15px;
 728 |     width: 60px;
 729 |     margin-bottom: 7px;
 730 |   }
 731 | 
 732 |   .mini-sidebar .user-profile .profile-img {
 733 |     padding: 15px 0 0 0;
 734 |     margin: 0px 0 0 6px;
 735 |   }
 736 | 
 737 |   .mini-sidebar .user-profile .profile-img:before {
 738 |     top: 15px;
 739 |   }
 740 | 
 741 |   .mini-sidebar .scroll-sidebar {
 742 |     padding-bottom: 0px;
 743 |     position: absolute;
 744 |   }
 745 | 
 746 |   .mini-sidebar .hide-menu,
 747 |   .mini-sidebar .nav-small-cap,
 748 |   .mini-sidebar .sidebar-footer,
 749 |   .mini-sidebar .user-profile .profile-text {
 750 |     display: none;
 751 |   }
 752 | 
 753 |   .mini-sidebar .nav-devider {
 754 |     width: 50px;
 755 |   }
 756 | 
 757 |   .mini-sidebar .sidebar-nav {
 758 |     background: transparent;
 759 |   }
 760 | 
 761 |   .mini-sidebar .sidebar-nav .sidebarnav > li > a {
 762 |     padding: 9px 15px;
 763 |     width: 50px;
 764 |   }
 765 | 
 766 |   .mini-sidebar .sidebar-nav .sidebarnav > li:hover > a {
 767 |     width: 260px;
 768 |     background: #26c6da;
 769 |     color: #ffffff;
 770 |     border-color: #009efb;
 771 |   }
 772 | 
 773 |   .mini-sidebar .sidebar-nav .sidebarnav > li:hover > a i {
 774 |     color: #ffffff;
 775 |   }
 776 | 
 777 |   .mini-sidebar .sidebar-nav .sidebarnav > li:hover > a .hide-menu {
 778 |     display: inline;
 779 |   }
 780 | 
 781 |   .mini-sidebar .sidebar-nav .sidebarnav > li.active > a {
 782 |     border-color: transparent;
 783 |   }
 784 | 
 785 |   .mini-sidebar .sidebar-nav .sidebarnav > li.active > a.active {
 786 |     border-color: #009efb;
 787 |   }
 788 | }
 789 | 
 790 | @media (max-width: 767px) {
 791 |   .mini-sidebar .left-sidebar {
 792 |     position: fixed;
 793 |   }
 794 | 
 795 |   .mini-sidebar .left-sidebar,
 796 |   .mini-sidebar .sidebar-footer {
 797 |     left: -240px;
 798 |   }
 799 | 
 800 |   .mini-sidebar.show-sidebar .left-sidebar,
 801 |   .mini-sidebar.show-sidebar .sidebar-footer {
 802 |     left: 0px;
 803 |   }
 804 | }
 805 | 
 806 | .little-profile .pro-img {
 807 |   /* margin-top: -80px; */
 808 |   margin-bottom: 20px;
 809 | }
 810 | 
 811 | .little-profile.views .pro-img {
 812 |   margin-top: 8px;
 813 |   margin-bottom: 24px;
 814 | }
 815 | 
 816 | .little-profile .pro-img img {
 817 |   width: 128px;
 818 |   height: 128px;
 819 |   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 820 |   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 821 |   border-radius: 100%;
 822 | }
 823 | 
 824 | .little-profile.views .pro-img img {
 825 |   width: 320px;
 826 |   height: 180px;
 827 |   border-radius: 8px;
 828 | }
 829 | 
 830 | @media (min-width: 1024px) {
 831 |   .page-wrapper {
 832 |     margin-left: 240px;
 833 |   }
 834 | 
 835 |   .footer {
 836 |     left: 240px;
 837 |   }
 838 | }
 839 | 
 840 | @media (max-width: 1023px) {
 841 |   .page-wrapper {
 842 |     margin-left: 60px;
 843 |     -webkit-transition: 0.2s ease-in;
 844 |     -o-transition: 0.2s ease-in;
 845 |     transition: 0.2s ease-in;
 846 |   }
 847 | 
 848 |   .footer {
 849 |     left: 60px;
 850 |   }
 851 | }
 852 | 
 853 | @media (min-width: 768px) {
 854 |   .navbar-header {
 855 |     width: 240px;
 856 |     -webkit-flex-shrink: 0;
 857 |     -ms-flex-negative: 0;
 858 |     flex-shrink: 0;
 859 |   }
 860 | 
 861 |   .navbar-header .navbar-brand {
 862 |     padding-top: 0px;
 863 |   }
 864 | 
 865 |   .mini-sidebar .page-wrapper {
 866 |     margin-left: 60px;
 867 |   }
 868 | 
 869 |   .mini-sidebar .footer {
 870 |     left: 60px;
 871 |   }
 872 | }
 873 | 
 874 | .preloader {
 875 |   width: 100%;
 876 |   height: 100%;
 877 |   top: 0px;
 878 |   position: fixed;
 879 |   z-index: 99999;
 880 |   background: #fff;
 881 | }
 882 | 
 883 | .preloader .cssload-speeding-wheel {
 884 |   position: absolute;
 885 |   top: calc(50% - 3.5px);
 886 |   left: calc(50% - 3.5px);
 887 | }
 888 | 
 889 | .dark-bg {
 890 |   width: 100%;
 891 |   height: 100%;
 892 |   top: 0px;
 893 |   position: fixed;
 894 |   z-index: 9999;
 895 |   opacity: 0.45;
 896 |   background: #000;
 897 |   display: none;
 898 | }
 899 | 
 900 | .super-search {
 901 |   z-index: 9999;
 902 |   top: 10vh;
 903 |   display: none;
 904 | }
 905 | 
 906 | .super-search .row {
 907 |   position: absolute;
 908 |   width: 100%;
 909 | }
 910 | 
 911 | .vs-leader {
 912 |   position: absolute;
 913 |   color: #ffd700;
 914 |   padding: 0 1em;
 915 |   display: none;
 916 | }
 917 | 
 918 | .leading-right .w-right {
 919 |   display: block;
 920 | }
 921 | 
 922 | .leading-left .w-left {
 923 |   display: block;
 924 | }
 925 | 
 926 | .w-left {
 927 |   right: 0;
 928 | }
 929 | 
 930 | .w-right {
 931 |   left: 0;
 932 | }
 933 | 
 934 | @media (max-width: 767px) {
 935 |   .display-1 {
 936 |     font-size: 4rem;
 937 |   }
 938 | 
 939 |   .display-1.views {
 940 |     font-size: 3rem;
 941 |   }
 942 | 
 943 |   .topbar {
 944 |     position: fixed;
 945 |     width: 100%;
 946 |   }
 947 | 
 948 |   .topbar .top-navbar {
 949 |     padding-right: 15px;
 950 |     -webkit-box-orient: horizontal;
 951 |     -webkit-box-direction: normal;
 952 |     -webkit-flex-direction: row;
 953 |     -ms-flex-direction: row;
 954 |     flex-direction: row;
 955 |     -webkit-flex-wrap: nowrap;
 956 |     -ms-flex-wrap: nowrap;
 957 |     flex-wrap: nowrap;
 958 |     -webkit-align-items: center;
 959 |     align-items: center;
 960 |   }
 961 | 
 962 |   .topbar .top-navbar .navbar-collapse {
 963 |     display: -webkit-box;
 964 |     display: -webkit-flex;
 965 |     display: -ms-flexbox;
 966 |     display: flex;
 967 |     width: 100%;
 968 |   }
 969 | 
 970 |   .topbar .top-navbar .navbar-nav {
 971 |     -webkit-box-orient: horizontal;
 972 |     -webkit-box-direction: normal;
 973 |     -webkit-flex-direction: row;
 974 |     -ms-flex-direction: row;
 975 |     flex-direction: row;
 976 |   }
 977 | 
 978 |   .topbar .top-navbar .navbar-nav > .nav-item.show {
 979 |     position: static;
 980 |   }
 981 | 
 982 |   .topbar .top-navbar .navbar-nav > .nav-item.show .dropdown-menu {
 983 |     width: 100%;
 984 |     margin-top: 0px;
 985 |   }
 986 | 
 987 |   .topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
 988 |     padding-left: 0.5rem;
 989 |     padding-right: 0.5rem;
 990 |   }
 991 | 
 992 |   .topbar .top-navbar .navbar-nav .dropdown-menu {
 993 |     position: absolute;
 994 |   }
 995 | 
 996 |   .mini-sidebar .page-wrapper {
 997 |     margin-left: 0px;
 998 |     padding-top: 70px;
 999 |   }
1000 | 
1001 |   .footer {
1002 |     left: 0;
1003 |   }
1004 | 
1005 |   #sharer .card-block {
1006 |     padding: 1.25rem 0;
1007 |   }
1008 | 
1009 |   .vs-leader {
1010 |     position: relative;
1011 |   }
1012 | }
1013 | 
1014 | /* ADS */
1015 | 
1016 | #disqus_thread iframe[src*="ads"] {
1017 |   display: none;
1018 | }
1019 | 
1020 | .ads {
1021 |   text-align: center;
1022 |   overflow: hidden;
1023 | }
1024 | 


--------------------------------------------------------------------------------
/compare/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="fragment" content="!" />
  8 |     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
  9 |     <meta name="monetization" content="$ilp.uphold.com/xBWda4QH423A" />
 10 |     <link rel="shortcut icon" type="image/png"
 11 |         href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 12 |     <link rel="icon" type="image/png" href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 13 |     <title>Comparison of Live Subscriber Count — YouTube Realtime</title>
 14 | 
 15 |     <link rel="canonical" href="https://gh.akshatmittal.com/youtube-realtime/compare/" />
 16 |     <meta name="twitter:card" content="summary_large_image" />
 17 |     <meta name="twitter:site" content="@iakshatmittal" />
 18 |     <meta name="twitter:title" content="Comparison of Live Subscriber Count — YouTube Realtime" />
 19 |     <meta name="twitter:description"
 20 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 21 |     <meta name="twitter:creator" content="@iakshatmittal" />
 22 |     <meta name="twitter:image" content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.png?v=1" />
 23 |     <meta property="og:title" content="Comparison of Live Subscriber Count — YouTube Realtime" />
 24 |     <meta property="og:type" content="article" />
 25 |     <meta property="og:url" content="https://gh.akshatmittal.com/youtube-realtime/compare/" />
 26 |     <meta property="og:image" content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.png?v=1" />
 27 |     <meta property="og:description"
 28 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 29 |     <meta property="og:site_name" content="Akshat Mittal" />
 30 |     <meta property="fb:admins" content="100000581280466" />
 31 |     <meta property="fb:app_id" content="1473140929606808" />
 32 |     <meta property="article:author" content="https://www.facebook.com/itsreallyakshat" />
 33 | 
 34 |     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
 35 |         rel="stylesheet">
 36 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
 37 |         integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
 38 |     <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
 39 |     <link href="../assets/css/odometer-theme-custom.css" rel="stylesheet">
 40 |     <link href="../assets/css/spinners.css" rel="stylesheet">
 41 |     <link href="../assets/css/style.css" rel="stylesheet">
 42 |     <link href="../assets/css/stylevs.css" rel="stylesheet">
 43 |     <link href="../assets/css/colors/light.css" id="theme" rel="stylesheet">
 44 |     <!-- Nah, no Dark Theme for you people (yet) -->
 45 |     <!--[if lt IE 9]>
 46 |     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 47 |     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 48 |     <![endif]-->
 49 | </head>
 50 | 
 51 | <body class="fix-header fix-sidebar card-no-border">
 52 |     <div class="preloader">
 53 |         <svg class="circular" viewBox="25 25 50 50">
 54 |             <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
 55 |         </svg>
 56 |     </div>
 57 |     <div class="dark-bg"></div>
 58 |     <div id="main-wrapper">
 59 |         <header class="topbar">
 60 |             <nav class="navbar top-navbar navbar-light">
 61 |                 <div class="navbar-header">
 62 |                     <a class="navbar-brand" href="../">
 63 |                         <b class="text-white">
 64 |                             <i class="fab fa-youtube"></i>
 65 |                         </b>
 66 |                         <span class="text-white">
 67 |                             YouTube Realtime
 68 |                         </span>
 69 |                     </a>
 70 |                 </div>
 71 |             </nav>
 72 |         </header>
 73 |         <div class="page-wrapper">
 74 |             <div class="container super-search nosel">
 75 |                 <div class="row">
 76 |                     <div class="col-12">
 77 |                         <div class="card">
 78 |                             <div class="card-block">
 79 |                                 <div>
 80 |                                     <h3 class="card-title text-center">Search</h3>
 81 |                                 </div>
 82 |                                 <form class="mx-2 my-auto d-inline w-100" id="yt_search_m">
 83 |                                     <div class="input-group">
 84 |                                         <input type="text" class="form-control form-control" placeholder="Search"
 85 |                                             id="yt_searchvalue_m" autocomplete="off">
 86 |                                         <span class="input-group-btn">
 87 |                                             <button class="btn btn-success" type="button" id="yt_searchbutton_m">
 88 |                                                 <i class="fa fa-search"></i>
 89 |                                             </button>
 90 |                                         </span>
 91 |                                     </div>
 92 |                                 </form>
 93 |                                 <div class="results" id="results">
 94 | 
 95 |                                 </div>
 96 |                                 <div>
 97 |                                     <button class="btn btn-danger w-100" id="yt_comrest">
 98 |                                         <i class="fa fa-times"></i> Close
 99 |                                     </button>
100 |                                 </div>
101 |                             </div>
102 |                         </div>
103 |                     </div>
104 |                 </div>
105 |             </div>
106 |             <div class="container">
107 |                 <div class="row ads">
108 |                     <div class="col-12">
109 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
110 |                             data-ad-slot="5753559092" data-ad-format="horizontal"
111 |                             data-full-width-responsive="true"></ins>
112 |                     </div>
113 |                 </div>
114 |                 <div class="row">
115 |                     <!-- Column -->
116 |                     <div class="col-12 m-t-20">
117 |                         <h1 class="display-title"><span class="vs1_name" id="yt_brand_vs1">.</span> vs <span
118 |                                 class="vs2_name" id="yt_brand_vs2">.</span> Live!</h1>
119 |                     </div>
120 |                 </div>
121 |                 <div class="row">
122 |                     <!-- Column -->
123 |                     <div class="col-12 col-md-6">
124 |                         <div class="card m-b-0 m-t-20">
125 |                             <img class="card-img-top img-responsive" src="../assets/images/banner.jpg" id="yt_cover_vs1"
126 |                                 style="max-height:200px;">
127 |                             <div class="card-block little-profile p-b-0 text-center">
128 |                                 <div class="pro-img">
129 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile_vs1">
130 |                                 </div>
131 |                                 <h3 class="vs-leader w-left">
132 |                                     <i class="fa fa-trophy"></i>
133 |                                 </h3>
134 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center vs1_name" id="yt_name_vs1">Akshat Mittal
135 |                                 </h3>
136 |                             </div>
137 |                             <div class="card-block text-center p-t-0">
138 |                                 <div class="card-body">
139 |                                     <div class="position-relative">
140 |                                         <div class="white">
141 |                                             <h1 class="display-1" id="yt_subs_vs1">00,000,000</h1>
142 |                                             <span>Subscribers</span>
143 |                                         </div>
144 |                                     </div>
145 |                                 </div>
146 |                             </div>
147 |                         </div>
148 |                         <div class="card-block text-center">
149 |                             <div class="text-center p-t-0 row">
150 |                                 <div class="col-6">
151 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt_vs1">
152 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i>
153 |                                             Subscribe</span>
154 |                                     </div>
155 |                                 </div>
156 |                                 <div class="col-6">
157 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare_vs1">
158 |                                         <span class="font-light m-b-0"><i class="fa fa-pen"></i> Change</span>
159 |                                     </div>
160 |                                 </div>
161 |                             </div>
162 |                         </div>
163 |                     </div>
164 |                     <div class="col-12 col-md-6">
165 |                         <div class="card m-b-0 m-t-20">
166 |                             <img class="card-img-top img-responsive" src="../assets/images/banner.jpg" id="yt_cover_vs2"
167 |                                 style="max-height:200px;">
168 |                             <div class="card-block little-profile p-b-0 text-center">
169 |                                 <div class="pro-img">
170 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile_vs2">
171 |                                 </div>
172 |                                 <h3 class="vs-leader w-right">
173 |                                     <i class="fa fa-trophy"></i>
174 |                                 </h3>
175 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center vs2_name" id="yt_name_vs2">Akshat Mittal
176 |                                 </h3>
177 |                             </div>
178 |                             <div class="card-block text-center p-t-0">
179 |                                 <div class="card-body">
180 |                                     <div class="position-relative">
181 |                                         <div class="white">
182 |                                             <h1 class="display-1" id="yt_subs_vs2">00,000,000</h1>
183 |                                             <span>Subscribers</span>
184 |                                         </div>
185 |                                     </div>
186 |                                 </div>
187 |                             </div>
188 |                         </div>
189 |                         <div class="card-block text-center">
190 |                             <div class="text-center p-t-0 row">
191 |                                 <div class="col-6">
192 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt_vs2">
193 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i>
194 |                                             Subscribe</span>
195 |                                     </div>
196 |                                 </div>
197 |                                 <div class="col-6">
198 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare_vs2">
199 |                                         <span class="font-light m-b-0"><i class="fa fa-pen"></i> Change</span>
200 |                                     </div>
201 |                                 </div>
202 |                             </div>
203 |                         </div>
204 |                     </div>
205 |                 </div>
206 |                 <div class="row">
207 |                     <div class="col-12 col-md-4">
208 |                         <div class="card selcl waves-effect">
209 |                             <div class="card-block" id="yt_sharevs1">
210 |                                 <div class="d-flex flex-row">
211 |                                     <div class="round round-lg align-self-center btn-twitter">
212 |                                         <i class="fab fa-twitter"></i>
213 |                                     </div>
214 |                                     <div class="m-l-10 align-self-center">
215 |                                         <h3 class="m-b-0 font-light">I support <span class="vs1_name">.</span>!</h3>
216 |                                         <h5 class="text-muted m-b-0">Share on Twitter!</h5>
217 |                                     </div>
218 |                                 </div>
219 |                             </div>
220 |                         </div>
221 |                     </div>
222 |                     <div class="col-12 col-md-4">
223 |                         <div class="card">
224 |                             <div class="card-block" style="text-align:center">
225 |                                 <div class="card-body">
226 |                                     <div class="position-relative">
227 |                                         <div class="mt-2 ml-2 white">
228 |                                             <h1 class="display-5" id="yt_diff">00,000,000,000</h1>
229 |                                             <span>Subscriber Difference</span>
230 |                                         </div>
231 |                                     </div>
232 |                                 </div>
233 |                             </div>
234 |                         </div>
235 |                     </div>
236 |                     <div class="col-12 col-md-4">
237 |                         <div class="card selcl waves-effect">
238 |                             <div class="card-block" id="yt_sharevs2">
239 |                                 <div class="d-flex flex-row">
240 |                                     <div class="round round-lg align-self-center btn-twitter">
241 |                                         <i class="fab fa-twitter"></i>
242 |                                     </div>
243 |                                     <div class="m-l-10 align-self-center">
244 |                                         <h3 class="m-b-0 font-light">I support <span class="vs2_name">.</span>!</h3>
245 |                                         <h5 class="text-muted m-b-0">Share on Twitter!</h5>
246 |                                     </div>
247 |                                 </div>
248 |                             </div>
249 |                         </div>
250 |                     </div>
251 |                 </div>
252 |                 <div class="row ads">
253 |                     <div class="col-12">
254 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
255 |                             data-ad-slot="6272433842" data-ad-format="horizontal"
256 |                             data-full-width-responsive="true"></ins>
257 |                     </div>
258 |                 </div>
259 |                 <div class="row">
260 |                     <div class="col-sm-12">
261 |                         <div class="card-block text-center p-t-0">
262 |                             <a href="https://www.facebook.com/itsreallyakshat" target="_blank">
263 |                                 <div class="align-self-center btn-facebook m-1 round">
264 |                                     <i class="fab fa-facebook"></i>
265 |                                 </div>
266 |                             </a>
267 |                             <a href="https://www.twitter.com/iakshatmittal" target="_blank">
268 |                                 <div class="align-self-center btn-twitter m-1 round">
269 |                                     <i class="fab fa-twitter"></i>
270 |                                 </div>
271 |                             </a>
272 |                             <a href="https://www.instagram.com/itsreallyakshat" target="_blank">
273 |                                 <div class="align-self-center btn-instagram m-1 round">
274 |                                     <i class="fab fa-instagram"></i>
275 |                                 </div>
276 |                             </a>
277 |                         </div>
278 |                     </div>
279 |                 </div>
280 |                 <div class="row">
281 |                     <div class="col-sm-12">
282 |                         <div class="card">
283 |                             <div class="card-block">
284 |                                 <div>
285 |                                     <h3 class="card-title text-center">Why do I see abbreviated subscriber counts?</h3>
286 |                                 </div>
287 |                                 <div>
288 |                                     <blockquote class="twitter-tweet tw-align-center">
289 |                                         <p lang="en" dir="ltr">According to <a
290 |                                                 href="https://twitter.com/TeamYouTube?ref_src=twsrc%5Etfw">@TeamYouTube</a>,
291 |                                             the abbreviated subscriber counts will be rolling out to YouTube and YouTube
292 |                                             Data API starting September 10th, 2019.</p>&mdash; Akshat Mittal
293 |                                         (@iakshatmittal) <a
294 |                                             href="https://twitter.com/iakshatmittal/status/1170691927030685696?ref_src=twsrc%5Etfw">September
295 |                                             8, 2019</a>
296 |                                     </blockquote>
297 |                                 </div>
298 |                             </div>
299 |                         </div>
300 |                     </div>
301 |                 </div>
302 |                 <div class="row">
303 |                     <div class="col-sm-4">
304 |                         <a class="card" href="https://www.createmytoken.com/token-generator/ethereum-erc20-generator/"
305 |                             target="_blank">
306 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
307 |                                 <span class="font-light m-b-0">ERC20 Token Generator</span>
308 |                             </div>
309 |                         </a>
310 |                     </div>
311 |                     <div class="col-sm-4">
312 |                         <a class="card"
313 |                             href="https://www.createmytoken.com/token-generator/bnb-smart-chain-bep20-generator/"
314 |                             target="_blank">
315 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
316 |                                 <span class="font-light m-b-0">BEP20 Token Generator</span>
317 |                             </div>
318 |                         </a>
319 |                     </div>
320 |                     <div class="col-sm-4">
321 |                         <a class="card" href="https://www.createmytoken.com/solana-token-creator/spl-token/"
322 |                             target="_blank">
323 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
324 |                                 <span class="font-light m-b-0">Solana SPL Token Creator</span>
325 |                             </div>
326 |                         </a>
327 |                     </div>
328 |                 </div>
329 |                 <div class="row ads">
330 |                     <div class="col-12">
331 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
332 |                             data-ad-slot="1351565063" data-ad-format="horizontal,rectangle"
333 |                             data-full-width-responsive="true"></ins>
334 |                     </div>
335 |                 </div>
336 |                 <div class="row">
337 |                     <div class="col-sm-12">
338 |                         <div class="card">
339 |                             <div class="card-block">
340 |                                 <div>
341 |                                     <div id="disqus_thread"></div>
342 |                                 </div>
343 |                             </div>
344 |                         </div>
345 |                     </div>
346 |                 </div>
347 |                 <div class="row" id="about">
348 |                     <div class="col-sm-12">
349 |                         <div class="card">
350 |                             <div class="card-block">
351 |                                 <div>
352 |                                     <div>
353 |                                         <h3 class="card-title">About</h3>
354 |                                     </div>
355 |                                 </div>
356 |                                 <div>
357 |                                     <p>YouTube Realtime shows the live subscriber count of any user on YouTube as
358 |                                         accurately
359 |                                         as possible. YouTube often doesn't update the subscriber count on the website in
360 |                                         real time and hence it's hard to keep a track on when you'll hit a new
361 |                                         milestone.
362 |                                         This tool eases the pressure and allows you see the subscribers change live!
363 |                                     </p>
364 |                                     <p>
365 |                                         The subscriber count, view count, video count and comment count are all taken
366 |                                         directly from Google's infrastructure via
367 |                                         the Analytics API. The counts are updated every second and are guaranteed to be
368 |                                         accurate.
369 |                                     </p>
370 |                                     <p>You can enter the channel name in any format. You can also input search terms for
371 |                                         a channel,
372 |                                         this will also try to automatically correct spellings in most cases. This is as
373 |                                         good
374 |                                         as YouTube Search itself since it uses the same engine to search.
375 |                                     </p>
376 |                                     <p>
377 |                                         You can literally enter anything that YouTube supports. Examples:
378 |                                     </p>
379 |                                     <ul>
380 |                                         <li>Channel Username (Example:
381 |                                             <b>MKBHD</b>)
382 |                                         </li>
383 |                                         <li>Channel ID (Example:
384 |                                             <b>UCK8sQmJBp8GCxrOtXWBpyEA</b>)
385 |                                         </li>
386 |                                         <li>Channel Name (Example:
387 |                                             <b>Fine Brothers Entertainment</b>)
388 |                                         </li>
389 |                                         <li>YouTube URL (Example:
390 |                                             <b>youtube.com/mkbhd</b>)
391 |                                         </li>
392 |                                         <li>Search Terms (Example:
393 |                                             <b>Justin Bieber</b>)
394 |                                         </li>
395 |                                         <li>Self Discovery Channels (Example:
396 |                                             <b>#Music</b>)
397 |                                         </li>
398 |                                     </ul>
399 |                                 </div>
400 |                             </div>
401 |                         </div>
402 |                     </div>
403 |                 </div>
404 |                 <div class="row">
405 |                     <div class="col-12">
406 |                         <div class="card">
407 |                             <div class="card-block">
408 |                                 <div class="form-horizontal form-material">
409 |                                     <p>
410 |                                         Thank you for using YouTube Realtime. You can find more information about the
411 |                                         project on
412 |                                         <a href="https://github.com/akshatmittal/youtube-realtime/blob/gh-pages/README.md"
413 |                                             target="_blank">GitHub</a> including license and contributors. You can get
414 |                                         in touch with me on
415 |                                         <a href="https://www.facebook.com/itsreallyakshat" target="_blank">Facebook</a>,
416 |                                         <a href="https://twitter.com/iakshatmittal" target="_blank">Twitter</a> or
417 |                                         <a href="mailto:ytlive@akshatmittal.com" target="_blank">email</a>, if you
418 |                                         prefer. Do let me know if you have any feedback or ideas for this
419 |                                         project!
420 |                                     </p>
421 |                                     <p class="mb-0">
422 |                                         YouTube is a registered trademark of Google.
423 |                                     </p>
424 |                                 </div>
425 |                             </div>
426 |                         </div>
427 |                     </div>
428 |                 </div>
429 |             </div>
430 |             <footer class="footer">&copy; 2020
431 |                 <a href="https://akshatmittal.com">Akshat Mittal</a>
432 |             </footer>
433 |         </div>
434 |     </div>
435 |     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"
436 |         integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
437 |     <script>
438 |         window.Tether = function () { } // I don't want Bootstrap to use Tether.
439 |     </script>
440 |     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
441 |     <script src="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.6/odometer.min.js"></script>
442 |     <script src="//cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
443 |     <script src="../assets/js/waves.js"></script>
444 |     <!-- <script src="../assets/js/custom-ui.js"></script> -->
445 |     <script>
446 |         $(function () {
447 |             $(".preloader").fadeOut();
448 |         });
449 |     </script>
450 | 
451 |     <script src="../assets/js/base.js"></script>
452 |     <script src="../assets/js/updateManager.vs.js"></script>
453 |     <script src="../assets/js/query.vs.js"></script>
454 |     <script src="../assets/js/multisearch.vs.js"></script>
455 |     <script src="../assets/js/live.vs.js"></script>
456 |     <script src="../assets/js/sharing.vs.js"></script>
457 |     <script src="../assets/js/urlManager.vs.js"></script>
458 |     <script src="../assets/js/init.js"></script>
459 |     <script src="//akshatmittal.disqus.com/embed.js" defer></script>
460 | </body>
461 | 
462 | </html>


--------------------------------------------------------------------------------
/live-view-count/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="fragment" content="!" />
  8 |     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
  9 |     <meta name="monetization" content="$ilp.uphold.com/xBWda4QH423A" />
 10 |     <link rel="shortcut icon" type="image/png"
 11 |         href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 12 |     <link rel="icon" type="image/png" href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 13 |     <title>Live YouTube View Count — YouTube Realtime</title>
 14 | 
 15 |     <link rel="canonical" href="https://gh.akshatmittal.com/youtube-realtime/live-view-count/" />
 16 |     <meta name="twitter:card" content="summary_large_image" />
 17 |     <meta name="twitter:site" content="@iakshatmittal" />
 18 |     <meta name="twitter:title" content="Live YouTube View Count — YouTube Realtime" />
 19 |     <meta name="twitter:description"
 20 |         content="YouTube Realtime is the easiest way to see the live view count for any YouTube Video on the planet! Simply enter the video name, url, or ID and you are good to go!" />
 21 |     <meta name="twitter:creator" content="@iakshatmittal" />
 22 |     <meta name="twitter:image" content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.png?v=1" />
 23 |     <meta property="og:title" content="Live YouTube View Count — YouTube Realtime" />
 24 |     <meta property="og:type" content="article" />
 25 |     <meta property="og:url" content="https://gh.akshatmittal.com/youtube-realtime/live-view-count/" />
 26 |     <meta property="og:image" content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.png?v=1" />
 27 |     <meta property="og:description"
 28 |         content="YouTube Realtime is the easiest way to see the live view count for any YouTube Video on the planet! Simply enter the video name, url, or ID and you are good to go!" />
 29 |     <meta property="og:site_name" content="Akshat Mittal" />
 30 |     <meta property="fb:admins" content="100000581280466" />
 31 |     <meta property="fb:app_id" content="1473140929606808" />
 32 |     <meta property="article:author" content="https://www.facebook.com/itsreallyakshat" />
 33 | 
 34 |     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
 35 |         rel="stylesheet">
 36 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
 37 |         integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
 38 |     <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
 39 |     <link href="../assets/css/odometer-theme-custom.css" rel="stylesheet">
 40 |     <link href="../assets/css/spinners.css" rel="stylesheet">
 41 |     <link href="../assets/css/style.css" rel="stylesheet">
 42 |     <link href="../assets/css/colors/light.css" id="theme" rel="stylesheet">
 43 |     <!-- Nah, no Dark Theme for you people (yet) -->
 44 |     <!--[if lt IE 9]>
 45 |     <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 46 |     <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 47 |     <![endif]-->
 48 | </head>
 49 | 
 50 | <body class="fix-header fix-sidebar card-no-border">
 51 |     <div class="preloader">
 52 |         <svg class="circular" viewBox="25 25 50 50">
 53 |             <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
 54 |         </svg>
 55 |     </div>
 56 |     <div class="dark-bg"></div>
 57 |     <div id="main-wrapper">
 58 |         <header class="topbar">
 59 |             <nav class="navbar top-navbar navbar-toggleable-sm navbar-light">
 60 |                 <div class="navbar-header">
 61 |                     <a class="navbar-brand" href="/youtube-realtime/">
 62 |                         <b class="text-white">
 63 |                             <i class="fab fa-youtube"></i>
 64 |                         </b>
 65 |                         <span class="text-white">
 66 |                             YouTube Realtime
 67 |                         </span>
 68 |                     </a>
 69 |                 </div>
 70 |                 <div class="navbar-collapse">
 71 |                     <ul class="navbar-nav mr-auto mt-md-0">
 72 |                         <li class="nav-item">
 73 |                             <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark"
 74 |                                 href="javascript:void(0)">
 75 |                                 <i class="fa fa-bars"></i>
 76 |                             </a>
 77 |                         </li>
 78 |                     </ul>
 79 |                     <form class="mx-2 my-auto d-inline w-100" id="yt_search">
 80 |                         <div class="input-group">
 81 |                             <input type="text" class="form-control form-control" placeholder="Enter video URL or name.."
 82 |                                 id="yt_searchvalue" autocomplete="off">
 83 |                             <span class="input-group-btn">
 84 |                                 <button class="btn btn-success" type="button" id="yt_searchbutton">
 85 |                                     <i class="fa fa-search"></i>
 86 |                                 </button>
 87 |                             </span>
 88 |                         </div>
 89 |                     </form>
 90 |                 </div>
 91 |             </nav>
 92 |         </header>
 93 |         <aside class="left-sidebar">
 94 |             <div class="scroll-sidebar">
 95 |                 <nav class="sidebar-nav">
 96 |                     <ul id="pinned_nav" class="sidebarnav">
 97 |                         <!-- <li class="nav-small-cap">FEATURED VIDEOS</li> -->
 98 |                     </ul>
 99 |                 </nav>
100 |                 <nav class="sidebar-nav">
101 |                     <ul class="sidebarnav">
102 |                         <li class="nav-small-cap">META</li>
103 |                         <li>
104 |                             <a class="waves-effect waves-dark" href="../" target="_blank">
105 |                                 <i class="fa fa-chart-bar"></i>
106 |                                 <span class="hide-menu">Subscriber Count</span>
107 |                             </a>
108 |                         </li>
109 |                         <li>
110 |                             <a class="waves-effect waves-dark" href="https://www.createmytoken.com/" target="_blank">
111 |                                 <i class="fab fa-ethereum"></i>
112 |                                 <span class="hide-menu">Token Generator</span>
113 |                             </a>
114 |                         </li>
115 |                         <li>
116 |                             <a class="waves-effect waves-dark"
117 |                                 href="https://www.createmytoken.com/solana-token-creator/" target="_blank">
118 |                                 <i class="fa fa-bolt"></i>
119 |                                 <span class="hide-menu">Solana Token Creator</span>
120 |                             </a>
121 |                         </li>
122 |                         <li>
123 |                             <a class="waves-effect waves-dark" href="https://www.metacrypt.org/" target="_blank">
124 |                                 <i class="fab fa-ethereum"></i>
125 |                                 <span class="hide-menu">Metacrypt</span>
126 |                             </a>
127 |                         </li>
128 |                     </ul>
129 |                 </nav>
130 |             </div>
131 |         </aside>
132 |         <div class="page-wrapper">
133 |             <div class="container super-search nosel">
134 |                 <div class="row">
135 |                     <div class="col-12">
136 |                         <div class="card">
137 |                             <div class="card-block">
138 |                                 <div>
139 |                                     <h3 class="card-title text-center">Compare with?</h3>
140 |                                 </div>
141 |                                 <form class="mx-2 my-auto d-inline w-100" id="yt_search_m">
142 |                                     <div class="input-group">
143 |                                         <input type="text" class="form-control form-control" placeholder="Search"
144 |                                             id="yt_searchvalue_m" autocomplete="off">
145 |                                         <span class="input-group-btn">
146 |                                             <button class="btn btn-success" type="button" id="yt_searchbutton_m">
147 |                                                 <i class="fa fa-search"></i>
148 |                                             </button>
149 |                                         </span>
150 |                                     </div>
151 |                                 </form>
152 |                                 <div class="results" id="results">
153 | 
154 |                                 </div>
155 |                                 <div>
156 |                                     <button class="btn btn-danger w-100" id="yt_comrest">
157 |                                         <i class="fa fa-times"></i> Close
158 |                                     </button>
159 |                                 </div>
160 |                             </div>
161 |                         </div>
162 |                     </div>
163 |                 </div>
164 |             </div>
165 |             <div class="container">
166 |                 <div class="row ads">
167 |                     <div class="col-12">
168 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
169 |                             data-ad-slot="5753559092" data-ad-format="horizontal"
170 |                             data-full-width-responsive="true"></ins>
171 |                     </div>
172 |                 </div>
173 |                 <div class="row">
174 |                     <!-- Column -->
175 |                     <div class="col-sm-12">
176 |                         <h3 class="m-t-20 m-b-0 text-center" style="font-size: 2em;">YouTube Live View Count</h3>
177 |                     </div>
178 |                     <div class="col-sm-12">
179 |                         <div class="card m-b-0 m-t-20">
180 |                             <img class="card-img-top img-responsive" src="/assets/images/banner.jpg" id="yt_cover"
181 |                                 style="max-height:0;">
182 |                             <div class="card-block little-profile p-b-0 text-center views">
183 |                                 <div class="pro-img">
184 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile">
185 |                                 </div>
186 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center yt_name" id="yt_name">Akshat Mittal</h3>
187 |                             </div>
188 |                             <div class="card-block text-center p-t-0">
189 |                                 <div class="card-body">
190 |                                     <div class="position-relative">
191 |                                         <div class="white">
192 |                                             <h1 class="display-1 views" id="yt_views">00,000,000</h1>
193 |                                             <span>Views</span>
194 |                                         </div>
195 |                                     </div>
196 |                                 </div>
197 |                             </div>
198 |                         </div>
199 |                     </div>
200 |                 </div>
201 |                 <div class="row" id="sharer">
202 |                     <div class="col-12">
203 |                         <div class="card-block text-center">
204 |                             <div class="text-center p-t-0 row">
205 |                                 <div class="col-6 ">
206 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt">
207 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i> Watch</span>
208 |                                     </div>
209 |                                 </div>
210 |                                 <!-- <div class="col-6 col-md-3">
211 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare">
212 |                                         <span class="font-light m-b-0"><i class="fa fa-chart-bar"></i> Compare</span>
213 |                                     </div>
214 |                                 </div> -->
215 |                                 <!-- <div class="col-6 col-md-4">
216 |                                     <div class="card no-shadow btn-archive mb-0 p-2 waves-effect" id="yt_sharear">
217 |                                         <span class="font-light m-b-0"><i class="fa fa-fire"></i> Promote</span>
218 |                                     </div>
219 |                                 </div> -->
220 |                                 <div class="col-6 ">
221 |                                     <div class="card no-shadow btn-twitter mb-0 p-2 waves-effect" id="yt_sharetw">
222 |                                         <span class="font-light m-b-0"><i class="fab fa-twitter"></i> Twitter</span>
223 |                                     </div>
224 |                                 </div>
225 |                             </div>
226 |                         </div>
227 |                     </div>
228 |                 </div>
229 |                 <div class="row ads">
230 |                     <div class="col-12">
231 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
232 |                             data-ad-slot="6272433842" data-ad-format="horizontal"
233 |                             data-full-width-responsive="true"></ins>
234 |                     </div>
235 |                 </div>
236 |                 <div class="row">
237 |                     <div class="col-sm-12" id="yt_sharear2">
238 |                         <div class="row">
239 |                             <div class="col-12 col-lg-4">
240 |                                 <div class="card">
241 |                                     <div class="card-block">
242 |                                         <div class="card-body">
243 |                                             <div class="position-relative">
244 |                                                 <div class="mt-2 ml-2 white">
245 |                                                     <h1 class="display-5" id="yt_likes">000,000</h1>
246 |                                                     <span>Likes</span>
247 |                                                 </div>
248 |                                             </div>
249 |                                         </div>
250 |                                     </div>
251 |                                 </div>
252 |                             </div>
253 |                             <div class="col-12 col-lg-4">
254 |                                 <div class="card">
255 |                                     <div class="card-block">
256 |                                         <div class="card-body">
257 |                                             <div class="position-relative">
258 |                                                 <div class="mt-2 ml-2 white">
259 |                                                     <h1 class="display-5" id="yt_dislikes">000,000</h1>
260 |                                                     <span>Dislikes</span>
261 |                                                 </div>
262 |                                             </div>
263 |                                         </div>
264 |                                     </div>
265 |                                 </div>
266 |                             </div>
267 |                             <div class="col-12 col-lg-4">
268 |                                 <div class="card">
269 |                                     <div class="card-block">
270 |                                         <div class="card-body">
271 |                                             <div class="position-relative">
272 |                                                 <div class="mt-2 ml-2 white">
273 |                                                     <h1 class="display-5" id="yt_comments">000,000</h1>
274 |                                                     <span>Comments</span>
275 |                                                 </div>
276 |                                             </div>
277 |                                         </div>
278 |                                     </div>
279 |                                 </div>
280 |                             </div>
281 |                         </div>
282 |                     </div>
283 |                 </div>
284 |                 <div class="row">
285 |                     <div class="col-sm-12">
286 |                         <div class="card-block text-center p-t-0">
287 |                             <a href="https://www.facebook.com/itsreallyakshat" target="_blank">
288 |                                 <div class="align-self-center btn-facebook m-1 round">
289 |                                     <i class="fab fa-facebook"></i>
290 |                                 </div>
291 |                             </a>
292 |                             <a href="https://www.twitter.com/iakshatmittal" target="_blank">
293 |                                 <div class="align-self-center btn-twitter m-1 round">
294 |                                     <i class="fab fa-twitter"></i>
295 |                                 </div>
296 |                             </a>
297 |                             <a href="https://www.instagram.com/itsreallyakshat" target="_blank">
298 |                                 <div class="align-self-center btn-instagram m-1 round">
299 |                                     <i class="fab fa-instagram"></i>
300 |                                 </div>
301 |                             </a>
302 |                         </div>
303 |                     </div>
304 |                 </div>
305 |                 <div class="row ads">
306 |                     <div class="col-12">
307 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
308 |                             data-ad-slot="1351565063" data-ad-format="horizontal,rectangle"
309 |                             data-full-width-responsive="true"></ins>
310 |                     </div>
311 |                 </div>
312 |                 <div class="row">
313 |                     <div class="col-sm-12">
314 |                         <div class="card">
315 |                             <div class="card-block">
316 |                                 <div>
317 |                                     <h3 class="card-title text-center">What do you think about <span
318 |                                             class="yt_name">.</span>?</h3>
319 |                                 </div>
320 |                                 <div>
321 |                                     <div id="disqus_thread"></div>
322 |                                 </div>
323 |                             </div>
324 |                         </div>
325 |                     </div>
326 |                 </div>
327 |                 <div class="row" id="about">
328 |                     <div class="col-sm-12">
329 |                         <div class="card">
330 |                             <div class="card-block">
331 |                                 <div>
332 |                                     <div>
333 |                                         <h3 class="card-title">About</h3>
334 |                                     </div>
335 |                                 </div>
336 |                                 <div>
337 |                                     <p>YouTube Realtime Live View Count shows the live view count of any video on
338 |                                         YouTube as
339 |                                         accurately as possible. YouTube often doesn't update the view count on the
340 |                                         website in
341 |                                         real time and hence it's hard to keep a track on when you'll hit a new
342 |                                         milestone.
343 |                                         This tool eases the pressure and allows you see the view count change live!
344 |                                     </p>
345 |                                     <p>
346 |                                         The view count, likes count, dislikes count and comment count are all taken
347 |                                         directly from Google's infrastructure via
348 |                                         the Analytics API. The counts are updated every second and are guaranteed to be
349 |                                         accurate.
350 |                                     </p>
351 |                                     <p>You can enter the video in any format. You can also input search terms for
352 |                                         a video,
353 |                                         this will also try to automatically correct spellings in most cases. This is as
354 |                                         good
355 |                                         as YouTube Search itself since it uses the same engine to search.
356 |                                     </p>
357 |                                 </div>
358 |                             </div>
359 |                         </div>
360 |                     </div>
361 |                 </div>
362 |                 <div class="row" id="embeds">
363 |                     <div class="col-sm-12">
364 |                         <div class="card">
365 |                             <div class="card-block">
366 |                                 <div>
367 |                                     <div>
368 |                                         <h3 class="card-title">Sharing</h3>
369 |                                     </div>
370 |                                 </div>
371 |                                 <div class="form-horizontal form-material">
372 |                                     <p>You can share the live view counts for any video on YouTube by sharing
373 |                                         the following
374 |                                         URL. You can also bookmark (Ctrl/Cmd + D) the current URL to
375 |                                         come back anytime!</p>
376 |                                     <div class="form-group">
377 |                                         <div class="col-md-12">
378 |                                             <input type="text" name="url" value="..wait.." id="yt_shareurl"
379 |                                                 onclick="this.select()" readonly=""
380 |                                                 class="form-control form-control-line text-center"></input>
381 |                                         </div>
382 |                                     </div>
383 |                                 </div>
384 |                                 <div>
385 |                                     <div>
386 |                                         <h3 class="card-title">Embeds</h3>
387 |                                     </div>
388 |                                 </div>
389 |                                 <div class="form-horizontal form-material">
390 |                                     <p>You can also embed the live view count for any video on your own website
391 |                                         by copying the following embed code in your HTML. Embeds are available as a
392 |                                         small or a large embed. <a href="https://counts.live/embeds" target="_blank"
393 |                                             rel="noopener noreferrer">More details here.</a></p>
394 |                                     <h5>Small Embed</h5>
395 |                                     <div class="form-group">
396 |                                         <div class="col-md-12">
397 |                                             <input type="text" name="embed_small" value="..wait.." id="yt_embed_small"
398 |                                                 onclick="this.select()" readonly=""
399 |                                                 class="form-control form-control-line text-center"></input>
400 |                                         </div>
401 |                                     </div>
402 |                                     <h5>Large Embed</h5>
403 |                                     <div class="form-group">
404 |                                         <div class="col-md-12">
405 |                                             <input type="text" name="embed_large" value="..wait.." id="yt_embed_large"
406 |                                                 onclick="this.select()" readonly=""
407 |                                                 class="form-control form-control-line text-center"></input>
408 |                                         </div>
409 |                                     </div>
410 |                                 </div>
411 |                             </div>
412 |                         </div>
413 |                     </div>
414 |                 </div>
415 |                 <div class="row">
416 |                     <div class="col-12">
417 |                         <div class="card">
418 |                             <div class="card-block">
419 |                                 <div class="form-horizontal form-material">
420 |                                     <p>
421 |                                         Thank you for using YouTube Realtime. You can find more information about the
422 |                                         project on
423 |                                         <a href="https://github.com/akshatmittal/youtube-realtime/blob/gh-pages/README.md"
424 |                                             target="_blank">GitHub</a> including license and contributors. You can get
425 |                                         in touch with me on
426 |                                         <a href="https://www.facebook.com/itsreallyakshat" target="_blank">Facebook</a>,
427 |                                         <a href="https://twitter.com/iakshatmittal" target="_blank">Twitter</a> or
428 |                                         <a href="mailto:ytlive@akshatmittal.com" target="_blank">email</a>, if you
429 |                                         prefer. Do let me know if you have any feedback or ideas for this
430 |                                         project!
431 |                                     </p>
432 |                                     <p class="mb-0">
433 |                                         YouTube is a registered trademark of Google.
434 |                                     </p>
435 |                                 </div>
436 |                             </div>
437 |                         </div>
438 |                     </div>
439 |                 </div>
440 |             </div>
441 |             <footer class="footer">&copy; 2020
442 |                 <a href="https://akshatmittal.com">Akshat Mittal</a>
443 |             </footer>
444 |         </div>
445 |     </div>
446 |     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"
447 |         integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
448 |     <script>
449 |         window.Tether = function () { } // I don't want Bootstrap to use Tether.
450 |     </script>
451 |     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
452 |     <script src="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.6/odometer.min.js"></script>
453 |     <script src="//cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
454 |     <script src="../assets/js/waves.js"></script>
455 |     <script src="../assets/js/custom-ui.js"></script>
456 | 
457 |     <script src="../assets/js/base.js"></script>
458 |     <script src="../assets/js/featured.view.js"></script>
459 |     <script src="../assets/js/updateManager.view.js"></script>
460 |     <script src="../assets/js/query.view.js"></script>
461 |     <script src="../assets/js/multisearch.view.js"></script>
462 |     <script src="../assets/js/live.view.js"></script>
463 |     <script src="../assets/js/sharing.view.js"></script>
464 |     <script src="../assets/js/urlManager.view.js"></script>
465 |     <script src="../assets/js/init.js"></script>
466 |     <script src="//akshatmittal.disqus.com/embed.js" defer></script>
467 | </body>
468 | 
469 | </html>


--------------------------------------------------------------------------------
/pewdiepie-vs-mrbeast/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="fragment" content="!" />
  8 |     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
  9 |     <meta name="monetization" content="$ilp.uphold.com/xBWda4QH423A" />
 10 |     <link rel="shortcut icon" type="image/png"
 11 |         href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 12 |     <link rel="icon" type="image/png" href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 13 |     <title>PewDiePie vs MrBeast Live Subscriber Count — YouTube Realtime</title>
 14 | 
 15 |     <link rel="canonical" href="https://gh.akshatmittal.com/youtube-realtime/pewdiepie-vs-tseries/" />
 16 |     <meta name="twitter:card" content="summary_large_image" />
 17 |     <meta name="twitter:site" content="@iakshatmittal" />
 18 |     <meta name="twitter:title" content="PewDiePie vs MrBeast Live Subscriber Count — YouTube Realtime" />
 19 |     <meta name="twitter:description"
 20 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 21 |     <meta name="twitter:creator" content="@iakshatmittal" />
 22 |     <meta name="twitter:image"
 23 |         content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.pvt.png?v=1" />
 24 |     <meta property="og:title" content="PewDiePie vs MrBeast Live Subscriber Count — YouTube Realtime" />
 25 |     <meta property="og:type" content="article" />
 26 |     <meta property="og:url" content="https://gh.akshatmittal.com/youtube-realtime/pewdiepie-vs-tseries/" />
 27 |     <meta property="og:image"
 28 |         content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.pvt.png?v=1" />
 29 |     <meta property="og:description"
 30 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 31 |     <meta property="og:site_name" content="Akshat Mittal" />
 32 |     <meta property="fb:admins" content="100000581280466" />
 33 |     <meta property="fb:app_id" content="1473140929606808" />
 34 |     <meta property="article:author" content="https://www.facebook.com/itsreallyakshat" />
 35 | 
 36 |     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
 37 |         rel="stylesheet">
 38 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
 39 |         integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
 40 |     <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
 41 |     <link href="../assets/css/odometer-theme-custom.css" rel="stylesheet">
 42 |     <link href="../assets/css/spinners.css" rel="stylesheet">
 43 |     <link href="../assets/css/style.css" rel="stylesheet">
 44 |     <link href="../assets/css/stylevs.css" rel="stylesheet">
 45 |     <link href="../assets/css/colors/light.css" id="theme" rel="stylesheet">
 46 |     <!-- Nah, no Dark Theme for you people (yet) -->
 47 |     <!--[if lt IE 9]>
 48 |     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 49 |     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 50 |     <![endif]-->
 51 | </head>
 52 | 
 53 | <body class="fix-header fix-sidebar card-no-border">
 54 |     <div class="preloader">
 55 |         <svg class="circular" viewBox="25 25 50 50">
 56 |             <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
 57 |         </svg>
 58 |     </div>
 59 |     <div class="dark-bg"></div>
 60 |     <div id="main-wrapper">
 61 |         <header class="topbar">
 62 |             <nav class="navbar top-navbar navbar-light">
 63 |                 <div class="navbar-header">
 64 |                     <a class="navbar-brand" href="../">
 65 |                         <b class="text-white">
 66 |                             <i class="fab fa-youtube"></i>
 67 |                         </b>
 68 |                         <span class="text-white">
 69 |                             YouTube Realtime
 70 |                         </span>
 71 |                     </a>
 72 |                 </div>
 73 |             </nav>
 74 |         </header>
 75 |         <div class="page-wrapper">
 76 |             <div class="container super-search nosel">
 77 |                 <div class="row">
 78 |                     <div class="col-12">
 79 |                         <div class="card">
 80 |                             <div class="card-block">
 81 |                                 <div>
 82 |                                     <h3 class="card-title text-center">Search</h3>
 83 |                                 </div>
 84 |                                 <form class="mx-2 my-auto d-inline w-100" id="yt_search_m">
 85 |                                     <div class="input-group">
 86 |                                         <input type="text" class="form-control form-control" placeholder="Search"
 87 |                                             id="yt_searchvalue_m" autocomplete="off">
 88 |                                         <span class="input-group-btn">
 89 |                                             <button class="btn btn-success" type="button" id="yt_searchbutton_m">
 90 |                                                 <i class="fa fa-search"></i>
 91 |                                             </button>
 92 |                                         </span>
 93 |                                     </div>
 94 |                                 </form>
 95 |                                 <div class="results" id="results">
 96 | 
 97 |                                 </div>
 98 |                                 <div>
 99 |                                     <button class="btn btn-danger w-100" id="yt_comrest">
100 |                                         <i class="fa fa-times"></i> Close
101 |                                     </button>
102 |                                 </div>
103 |                             </div>
104 |                         </div>
105 |                     </div>
106 |                 </div>
107 |             </div>
108 |             <div class="container">
109 |                 <div class="row ads">
110 |                     <div class="col-12">
111 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
112 |                             data-ad-slot="5753559092" data-ad-format="horizontal"
113 |                             data-full-width-responsive="true"></ins>
114 |                     </div>
115 |                 </div>
116 |                 <div class="row">
117 |                     <!-- Column -->
118 |                     <div class="col-12 m-t-20">
119 |                         <h1 class="display-title"><span class="vs1_name" id="yt_brand_vs1">.</span> vs <span
120 |                                 class="vs2_name" id="yt_brand_vs2">.</span> Live!</h1>
121 |                     </div>
122 |                 </div>
123 |                 <div class="row">
124 |                     <!-- Column -->
125 |                     <div class="col-12 col-md-6">
126 |                         <div class="card m-b-0 m-t-20">
127 |                             <img class="card-img-top img-responsive" src="../assets/images/banner.jpg" id="yt_cover_vs1"
128 |                                 style="max-height:200px;">
129 |                             <div class="card-block little-profile p-b-0 text-center">
130 |                                 <div class="pro-img">
131 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile_vs1">
132 |                                 </div>
133 |                                 <h3 class="vs-leader w-left">
134 |                                     <i class="fa fa-trophy"></i>
135 |                                 </h3>
136 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center vs1_name" id="yt_name_vs1">Akshat Mittal
137 |                                 </h3>
138 |                             </div>
139 |                             <div class="card-block text-center p-t-0">
140 |                                 <div class="card-body">
141 |                                     <div class="position-relative">
142 |                                         <div class="white">
143 |                                             <h1 class="display-1" id="yt_subs_vs1">00,000,000</h1>
144 |                                             <span>Subscribers</span>
145 |                                         </div>
146 |                                     </div>
147 |                                 </div>
148 |                             </div>
149 |                         </div>
150 |                         <div class="card-block text-center">
151 |                             <div class="text-center p-t-0 row">
152 |                                 <div class="col-6">
153 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt_vs1">
154 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i>
155 |                                             Subscribe</span>
156 |                                     </div>
157 |                                 </div>
158 |                                 <div class="col-6">
159 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare_vs1">
160 |                                         <span class="font-light m-b-0"><i class="fa fa-pen"></i> Change</span>
161 |                                     </div>
162 |                                 </div>
163 |                             </div>
164 |                         </div>
165 |                     </div>
166 |                     <div class="col-12 col-md-6">
167 |                         <div class="card m-b-0 m-t-20">
168 |                             <img class="card-img-top img-responsive" src="../assets/images/banner.jpg" id="yt_cover_vs2"
169 |                                 style="max-height:200px;">
170 |                             <div class="card-block little-profile p-b-0 text-center">
171 |                                 <div class="pro-img">
172 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile_vs2">
173 |                                 </div>
174 |                                 <h3 class="vs-leader w-right">
175 |                                     <i class="fa fa-trophy"></i>
176 |                                 </h3>
177 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center vs2_name" id="yt_name_vs2">Akshat Mittal
178 |                                 </h3>
179 |                             </div>
180 |                             <div class="card-block text-center p-t-0">
181 |                                 <div class="card-body">
182 |                                     <div class="position-relative">
183 |                                         <div class="white">
184 |                                             <h1 class="display-1" id="yt_subs_vs2">00,000,000</h1>
185 |                                             <span>Subscribers</span>
186 |                                         </div>
187 |                                     </div>
188 |                                 </div>
189 |                             </div>
190 |                         </div>
191 |                         <div class="card-block text-center">
192 |                             <div class="text-center p-t-0 row">
193 |                                 <div class="col-6">
194 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt_vs2">
195 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i>
196 |                                             Subscribe</span>
197 |                                     </div>
198 |                                 </div>
199 |                                 <div class="col-6">
200 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare_vs2">
201 |                                         <span class="font-light m-b-0"><i class="fa fa-pen"></i> Change</span>
202 |                                     </div>
203 |                                 </div>
204 |                             </div>
205 |                         </div>
206 |                     </div>
207 |                 </div>
208 |                 <div class="row">
209 |                     <div class="col-12 col-md-4">
210 |                         <div class="card selcl waves-effect">
211 |                             <div class="card-block" id="yt_sharevs1">
212 |                                 <div class="d-flex flex-row">
213 |                                     <div class="round round-lg align-self-center btn-twitter">
214 |                                         <i class="fab fa-twitter"></i>
215 |                                     </div>
216 |                                     <div class="m-l-10 align-self-center">
217 |                                         <h3 class="m-b-0 font-light">I support <span class="vs1_name">.</span>!</h3>
218 |                                         <h5 class="text-muted m-b-0">Share on Twitter!</h5>
219 |                                     </div>
220 |                                 </div>
221 |                             </div>
222 |                         </div>
223 |                     </div>
224 |                     <div class="col-12 col-md-4">
225 |                         <div class="card">
226 |                             <div class="card-block" style="text-align:center">
227 |                                 <div class="card-body">
228 |                                     <div class="position-relative">
229 |                                         <div class="mt-2 ml-2 white">
230 |                                             <h1 class="display-5" id="yt_diff">00,000,000,000</h1>
231 |                                             <span>Subscriber Difference</span>
232 |                                         </div>
233 |                                     </div>
234 |                                 </div>
235 |                             </div>
236 |                         </div>
237 |                     </div>
238 |                     <div class="col-12 col-md-4">
239 |                         <div class="card selcl waves-effect">
240 |                             <div class="card-block" id="yt_sharevs2">
241 |                                 <div class="d-flex flex-row">
242 |                                     <div class="round round-lg align-self-center btn-twitter">
243 |                                         <i class="fab fa-twitter"></i>
244 |                                     </div>
245 |                                     <div class="m-l-10 align-self-center">
246 |                                         <h3 class="m-b-0 font-light">I support <span class="vs2_name">.</span>!</h3>
247 |                                         <h5 class="text-muted m-b-0">Share on Twitter!</h5>
248 |                                     </div>
249 |                                 </div>
250 |                             </div>
251 |                         </div>
252 |                     </div>
253 |                 </div>
254 |                 <div class="row ads">
255 |                     <div class="col-12">
256 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
257 |                             data-ad-slot="6272433842" data-ad-format="horizontal"
258 |                             data-full-width-responsive="true"></ins>
259 |                     </div>
260 |                 </div>
261 |                 <div class="row">
262 |                     <div class="col-sm-12">
263 |                         <div class="card-block text-center p-t-0">
264 |                             <a href="https://www.facebook.com/itsreallyakshat" target="_blank">
265 |                                 <div class="align-self-center btn-facebook m-1 round">
266 |                                     <i class="fab fa-facebook"></i>
267 |                                 </div>
268 |                             </a>
269 |                             <a href="https://www.twitter.com/iakshatmittal" target="_blank">
270 |                                 <div class="align-self-center btn-twitter m-1 round">
271 |                                     <i class="fab fa-twitter"></i>
272 |                                 </div>
273 |                             </a>
274 |                             <a href="https://www.instagram.com/itsreallyakshat" target="_blank">
275 |                                 <div class="align-self-center btn-instagram m-1 round">
276 |                                     <i class="fab fa-instagram"></i>
277 |                                 </div>
278 |                             </a>
279 |                         </div>
280 |                     </div>
281 |                 </div>
282 |                 <div class="row">
283 |                     <div class="col-sm-12">
284 |                         <div class="card">
285 |                             <div class="card-block">
286 |                                 <div>
287 |                                     <h3 class="card-title text-center">Why do I see abbreviated subscriber counts?</h3>
288 |                                 </div>
289 |                                 <div>
290 |                                     <blockquote class="twitter-tweet tw-align-center">
291 |                                         <p lang="en" dir="ltr">According to <a
292 |                                                 href="https://twitter.com/TeamYouTube?ref_src=twsrc%5Etfw">@TeamYouTube</a>,
293 |                                             the abbreviated subscriber counts will be rolling out to YouTube and YouTube
294 |                                             Data API starting September 10th, 2019.</p>&mdash; Akshat Mittal
295 |                                         (@iakshatmittal) <a
296 |                                             href="https://twitter.com/iakshatmittal/status/1170691927030685696?ref_src=twsrc%5Etfw">September
297 |                                             8, 2019</a>
298 |                                     </blockquote>
299 |                                 </div>
300 |                             </div>
301 |                         </div>
302 |                     </div>
303 |                 </div>
304 |                 <div class="row">
305 |                     <div class="col-sm-4">
306 |                         <a class="card" href="https://www.createmytoken.com/token-generator/ethereum-erc20-generator/"
307 |                             target="_blank">
308 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
309 |                                 <span class="font-light m-b-0">ERC20 Token Generator</span>
310 |                             </div>
311 |                         </a>
312 |                     </div>
313 |                     <div class="col-sm-4">
314 |                         <a class="card"
315 |                             href="https://www.createmytoken.com/token-generator/bnb-smart-chain-bep20-generator/"
316 |                             target="_blank">
317 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
318 |                                 <span class="font-light m-b-0">BEP20 Token Generator</span>
319 |                             </div>
320 |                         </a>
321 |                     </div>
322 |                     <div class="col-sm-4">
323 |                         <a class="card" href="https://www.createmytoken.com/solana-token-creator/spl-token/"
324 |                             target="_blank">
325 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
326 |                                 <span class="font-light m-b-0">Solana SPL Token Creator</span>
327 |                             </div>
328 |                         </a>
329 |                     </div>
330 |                 </div>
331 |                 <div class="row ads">
332 |                     <div class="col-12">
333 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
334 |                             data-ad-slot="1351565063" data-ad-format="horizontal,rectangle"
335 |                             data-full-width-responsive="true"></ins>
336 |                     </div>
337 |                 </div>
338 |                 <div class="row">
339 |                     <div class="col-sm-12">
340 |                         <div class="card">
341 |                             <div class="card-block">
342 |                                 <div>
343 |                                     <div id="disqus_thread"></div>
344 |                                 </div>
345 |                             </div>
346 |                         </div>
347 |                     </div>
348 |                 </div>
349 |                 <div class="row" id="about">
350 |                     <div class="col-sm-12">
351 |                         <div class="card">
352 |                             <div class="card-block">
353 |                                 <div>
354 |                                     <div>
355 |                                         <h3 class="card-title">About</h3>
356 |                                     </div>
357 |                                 </div>
358 |                                 <div>
359 |                                     <p>YouTube Realtime shows the live subscriber count of any user on YouTube as
360 |                                         accurately
361 |                                         as possible. YouTube often doesn't update the subscriber count on the website in
362 |                                         real time and hence it's hard to keep a track on when you'll hit a new
363 |                                         milestone.
364 |                                         This tool eases the pressure and allows you see the subscribers change live!
365 |                                     </p>
366 |                                     <p>
367 |                                         The subscriber count, view count, video count and comment count are all taken
368 |                                         directly from Google's infrastructure via
369 |                                         the Analytics API. The counts are updated every second and are guaranteed to be
370 |                                         accurate.
371 |                                     </p>
372 |                                     <p>You can enter the channel name in any format. You can also input search terms for
373 |                                         a channel,
374 |                                         this will also try to automatically correct spellings in most cases. This is as
375 |                                         good
376 |                                         as YouTube Search itself since it uses the same engine to search.
377 |                                     </p>
378 |                                     <p>
379 |                                         You can literally enter anything that YouTube supports. Examples:
380 |                                     </p>
381 |                                     <ul>
382 |                                         <li>Channel Username (Example:
383 |                                             <b>MKBHD</b>)
384 |                                         </li>
385 |                                         <li>Channel ID (Example:
386 |                                             <b>UCK8sQmJBp8GCxrOtXWBpyEA</b>)
387 |                                         </li>
388 |                                         <li>Channel Name (Example:
389 |                                             <b>Fine Brothers Entertainment</b>)
390 |                                         </li>
391 |                                         <li>YouTube URL (Example:
392 |                                             <b>youtube.com/mkbhd</b>)
393 |                                         </li>
394 |                                         <li>Search Terms (Example:
395 |                                             <b>Justin Bieber</b>)
396 |                                         </li>
397 |                                         <li>Self Discovery Channels (Example:
398 |                                             <b>#Music</b>)
399 |                                         </li>
400 |                                     </ul>
401 |                                 </div>
402 |                             </div>
403 |                         </div>
404 |                     </div>
405 |                 </div>
406 |                 <div class="row">
407 |                     <div class="col-12">
408 |                         <div class="card">
409 |                             <div class="card-block">
410 |                                 <div class="form-horizontal form-material">
411 |                                     <p>
412 |                                         Thank you for using YouTube Realtime. You can find more information about the
413 |                                         project on
414 |                                         <a href="https://github.com/akshatmittal/youtube-realtime/blob/gh-pages/README.md"
415 |                                             target="_blank">GitHub</a> including license and contributors. You can get
416 |                                         in touch with me on
417 |                                         <a href="https://www.facebook.com/itsreallyakshat" target="_blank">Facebook</a>,
418 |                                         <a href="https://twitter.com/iakshatmittal" target="_blank">Twitter</a> or
419 |                                         <a href="mailto:ytlive@akshatmittal.com" target="_blank">email</a>, if you
420 |                                         prefer. Do let me know if you have any feedback or ideas for this
421 |                                         project!
422 |                                     </p>
423 |                                     <p class="mb-0">
424 |                                         YouTube is a registered trademark of Google.
425 |                                     </p>
426 |                                 </div>
427 |                             </div>
428 |                         </div>
429 |                     </div>
430 |                 </div>
431 |             </div>
432 |             <footer class="footer">&copy; 2020
433 |                 <a href="https://akshatmittal.com">Akshat Mittal</a>
434 |             </footer>
435 |         </div>
436 |     </div>
437 |     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"
438 |         integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
439 |     <script>
440 |         window.Tether = function () { } // I don't want Bootstrap to use Tether.
441 |     </script>
442 |     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
443 |     <script src="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.6/odometer.min.js"></script>
444 |     <script src="//cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
445 |     <script src="../assets/js/waves.js"></script>
446 |     <script>
447 |         $(function () {
448 |             $(".preloader").fadeOut();
449 |         });
450 |     </script>
451 | 
452 |     <script src="../assets/js/base.js"></script>
453 |     <script src="../assets/js/updateManager.vs.js"></script>
454 |     <script src="../assets/js/query.vs.js"></script>
455 |     <script src="../assets/js/multisearch.vs.js"></script>
456 |     <script src="../assets/js/live.vs.js"></script>
457 |     <script src="../assets/js/sharing.vs.js"></script>
458 |     <!-- <script src="../assets/js/urlManager.vs.js"></script> -->
459 |     <script src="../assets/js/init.js"></script>
460 |     <script src="//akshatmittal.disqus.com/embed.js" defer></script>
461 |     <script>
462 |         var isCustomPage = 1;
463 |         setTimeout(function () {
464 |             DISQUS.reset({
465 |                 reload: true,
466 |                 config: function () {
467 |                     this.page.url = "https://akshatmittal.com/youtube-realtime/pewdiepie-vs-mrbeast/";
468 |                     this.page.identifier = "UC-lHJZR3Gqxm24_Vd_AJ5Yw$$UCX6OQ3DkcsbYNE6H8uQQuVA";
469 |                 }
470 |             });
471 |         }, 500)
472 |         YT.live.setVS("UC-lHJZR3Gqxm24_Vd_AJ5Yw", "UCX6OQ3DkcsbYNE6H8uQQuVA");
473 |     </script>
474 | </body>
475 | 
476 | </html>


--------------------------------------------------------------------------------
/pewdiepie-vs-cocomelon/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="fragment" content="!" />
  8 |     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
  9 |     <meta name="monetization" content="$ilp.uphold.com/xBWda4QH423A" />
 10 |     <link rel="shortcut icon" type="image/png"
 11 |         href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 12 |     <link rel="icon" type="image/png" href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 13 |     <title>PewDiePie vs Cocomelon Live Subscriber Count — YouTube Realtime</title>
 14 |     <link rel="canonical" href="https://gh.akshatmittal.com/youtube-realtime/pewdiepie-vs-cocomelon/" />
 15 |     <meta name="twitter:card" content="summary_large_image" />
 16 |     <meta name="twitter:site" content="@iakshatmittal" />
 17 |     <meta name="twitter:title" content="PewDiePie vs Cocomelon Live Subscriber Count — YouTube Realtime" />
 18 |     <meta name="twitter:description"
 19 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 20 |     <meta name="twitter:creator" content="@iakshatmittal" />
 21 |     <meta name="twitter:image"
 22 |         content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.pvc.png?v=1" />
 23 |     <meta property="og:title" content="PewDiePie vs Cocomelon Live Subscriber Count — YouTube Realtime" />
 24 |     <meta property="og:type" content="article" />
 25 |     <meta property="og:url" content="https://gh.akshatmittal.com/youtube-realtime/pewdiepie-vs-cocomelon/" />
 26 |     <meta property="og:image"
 27 |         content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.pvc.png?v=1" />
 28 |     <meta property="og:description"
 29 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 30 |     <meta property="og:site_name" content="Akshat Mittal" />
 31 |     <meta property="fb:admins" content="100000581280466" />
 32 |     <meta property="fb:app_id" content="1473140929606808" />
 33 |     <meta property="article:author" content="https://www.facebook.com/itsreallyakshat" />
 34 | 
 35 |     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
 36 |         rel="stylesheet">
 37 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
 38 |         integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
 39 |     <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
 40 |     <link href="../assets/css/odometer-theme-custom.css" rel="stylesheet">
 41 |     <link href="../assets/css/spinners.css" rel="stylesheet">
 42 |     <link href="../assets/css/style.css" rel="stylesheet">
 43 |     <link href="../assets/css/stylevs.css" rel="stylesheet">
 44 |     <link href="../assets/css/colors/light.css" id="theme" rel="stylesheet">
 45 |     <!-- Nah, no Dark Theme for you people (yet) -->
 46 |     <!--[if lt IE 9]>
 47 |     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 48 |     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 49 |     <![endif]-->
 50 | </head>
 51 | 
 52 | <body class="fix-header fix-sidebar card-no-border">
 53 |     <div class="preloader">
 54 |         <svg class="circular" viewBox="25 25 50 50">
 55 |             <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
 56 |         </svg>
 57 |     </div>
 58 |     <div class="dark-bg"></div>
 59 |     <div id="main-wrapper">
 60 |         <header class="topbar">
 61 |             <nav class="navbar top-navbar navbar-light">
 62 |                 <div class="navbar-header">
 63 |                     <a class="navbar-brand" href="../">
 64 |                         <b class="text-white">
 65 |                             <i class="fab fa-youtube"></i>
 66 |                         </b>
 67 |                         <span class="text-white">
 68 |                             YouTube Realtime
 69 |                         </span>
 70 |                     </a>
 71 |                 </div>
 72 |             </nav>
 73 |         </header>
 74 |         <div class="page-wrapper">
 75 |             <div class="container super-search nosel">
 76 |                 <div class="row">
 77 |                     <div class="col-12">
 78 |                         <div class="card">
 79 |                             <div class="card-block">
 80 |                                 <div>
 81 |                                     <h3 class="card-title text-center">Search</h3>
 82 |                                 </div>
 83 |                                 <form class="mx-2 my-auto d-inline w-100" id="yt_search_m">
 84 |                                     <div class="input-group">
 85 |                                         <input type="text" class="form-control form-control" placeholder="Search"
 86 |                                             id="yt_searchvalue_m" autocomplete="off">
 87 |                                         <span class="input-group-btn">
 88 |                                             <button class="btn btn-success" type="button" id="yt_searchbutton_m">
 89 |                                                 <i class="fa fa-search"></i>
 90 |                                             </button>
 91 |                                         </span>
 92 |                                     </div>
 93 |                                 </form>
 94 |                                 <div class="results" id="results">
 95 | 
 96 |                                 </div>
 97 |                                 <div>
 98 |                                     <button class="btn btn-danger w-100" id="yt_comrest">
 99 |                                         <i class="fa fa-times"></i> Close
100 |                                     </button>
101 |                                 </div>
102 |                             </div>
103 |                         </div>
104 |                     </div>
105 |                 </div>
106 |             </div>
107 |             <div class="container">
108 |                 <div class="row ads">
109 |                     <div class="col-12">
110 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
111 |                             data-ad-slot="5753559092" data-ad-format="horizontal"
112 |                             data-full-width-responsive="true"></ins>
113 |                     </div>
114 |                 </div>
115 |                 <div class="row">
116 |                     <!-- Column -->
117 |                     <div class="col-12 m-t-20">
118 |                         <h1 class="display-title"><span class="vs1_name" id="yt_brand_vs1">.</span> vs <span
119 |                                 class="vs2_name" id="yt_brand_vs2">.</span> Live!</h1>
120 |                     </div>
121 |                 </div>
122 |                 <div class="row">
123 |                     <!-- Column -->
124 |                     <div class="col-12 col-md-6">
125 |                         <div class="card m-b-0 m-t-20">
126 |                             <img class="card-img-top img-responsive" src="../assets/images/banner.jpg" id="yt_cover_vs1"
127 |                                 style="max-height:200px;">
128 |                             <div class="card-block little-profile p-b-0 text-center">
129 |                                 <div class="pro-img">
130 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile_vs1">
131 |                                 </div>
132 |                                 <h3 class="vs-leader w-left">
133 |                                     <i class="fa fa-trophy"></i>
134 |                                 </h3>
135 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center vs1_name" id="yt_name_vs1">Akshat Mittal
136 |                                 </h3>
137 |                             </div>
138 |                             <div class="card-block text-center p-t-0">
139 |                                 <div class="card-body">
140 |                                     <div class="position-relative">
141 |                                         <div class="white">
142 |                                             <h1 class="display-1" id="yt_subs_vs1">00,000,000</h1>
143 |                                             <span>Subscribers</span>
144 |                                         </div>
145 |                                     </div>
146 |                                 </div>
147 |                             </div>
148 |                         </div>
149 |                         <div class="card-block text-center">
150 |                             <div class="text-center p-t-0 row">
151 |                                 <div class="col-6">
152 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt_vs1">
153 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i>
154 |                                             Subscribe</span>
155 |                                     </div>
156 |                                 </div>
157 |                                 <div class="col-6">
158 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare_vs1">
159 |                                         <span class="font-light m-b-0"><i class="fa fa-pen"></i> Change</span>
160 |                                     </div>
161 |                                 </div>
162 |                             </div>
163 |                         </div>
164 |                     </div>
165 |                     <div class="col-12 col-md-6">
166 |                         <div class="card m-b-0 m-t-20">
167 |                             <img class="card-img-top img-responsive" src="../assets/images/banner.jpg" id="yt_cover_vs2"
168 |                                 style="max-height:200px;">
169 |                             <div class="card-block little-profile p-b-0 text-center">
170 |                                 <div class="pro-img">
171 |                                     <img src="../assets/images/icon.png" alt="user" id="yt_profile_vs2">
172 |                                 </div>
173 |                                 <h3 class="vs-leader w-right">
174 |                                     <i class="fa fa-trophy"></i>
175 |                                 </h3>
176 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center vs2_name" id="yt_name_vs2">Akshat Mittal
177 |                                 </h3>
178 |                             </div>
179 |                             <div class="card-block text-center p-t-0">
180 |                                 <div class="card-body">
181 |                                     <div class="position-relative">
182 |                                         <div class="white">
183 |                                             <h1 class="display-1" id="yt_subs_vs2">00,000,000</h1>
184 |                                             <span>Subscribers</span>
185 |                                         </div>
186 |                                     </div>
187 |                                 </div>
188 |                             </div>
189 |                         </div>
190 |                         <div class="card-block text-center">
191 |                             <div class="text-center p-t-0 row">
192 |                                 <div class="col-6">
193 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt_vs2">
194 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i>
195 |                                             Subscribe</span>
196 |                                     </div>
197 |                                 </div>
198 |                                 <div class="col-6">
199 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare_vs2">
200 |                                         <span class="font-light m-b-0"><i class="fa fa-pen"></i> Change</span>
201 |                                     </div>
202 |                                 </div>
203 |                             </div>
204 |                         </div>
205 |                     </div>
206 |                 </div>
207 |                 <div class="row">
208 |                     <div class="col-12 col-md-4">
209 |                         <div class="card selcl waves-effect">
210 |                             <div class="card-block" id="yt_sharevs1">
211 |                                 <div class="d-flex flex-row">
212 |                                     <div class="round round-lg align-self-center btn-twitter">
213 |                                         <i class="fab fa-twitter"></i>
214 |                                     </div>
215 |                                     <div class="m-l-10 align-self-center">
216 |                                         <h3 class="m-b-0 font-light">I support <span class="vs1_name">.</span>!</h3>
217 |                                         <h5 class="text-muted m-b-0">Share on Twitter!</h5>
218 |                                     </div>
219 |                                 </div>
220 |                             </div>
221 |                         </div>
222 |                     </div>
223 |                     <div class="col-12 col-md-4">
224 |                         <div class="card">
225 |                             <div class="card-block" style="text-align:center">
226 |                                 <div class="card-body">
227 |                                     <div class="position-relative">
228 |                                         <div class="mt-2 ml-2 white">
229 |                                             <h1 class="display-5" id="yt_diff">00,000,000,000</h1>
230 |                                             <span>Subscriber Difference</span>
231 |                                         </div>
232 |                                     </div>
233 |                                 </div>
234 |                             </div>
235 |                         </div>
236 |                     </div>
237 |                     <div class="col-12 col-md-4">
238 |                         <div class="card selcl waves-effect">
239 |                             <div class="card-block" id="yt_sharevs2">
240 |                                 <div class="d-flex flex-row">
241 |                                     <div class="round round-lg align-self-center btn-twitter">
242 |                                         <i class="fab fa-twitter"></i>
243 |                                     </div>
244 |                                     <div class="m-l-10 align-self-center">
245 |                                         <h3 class="m-b-0 font-light">I support <span class="vs2_name">.</span>!</h3>
246 |                                         <h5 class="text-muted m-b-0">Share on Twitter!</h5>
247 |                                     </div>
248 |                                 </div>
249 |                             </div>
250 |                         </div>
251 |                     </div>
252 |                 </div>
253 |                 <div class="row ads">
254 |                     <div class="col-12">
255 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
256 |                             data-ad-slot="6272433842" data-ad-format="horizontal"
257 |                             data-full-width-responsive="true"></ins>
258 |                     </div>
259 |                 </div>
260 |                 <div class="row">
261 |                     <div class="col-sm-12">
262 |                         <div class="card-block text-center p-t-0">
263 |                             <a href="https://www.facebook.com/itsreallyakshat" target="_blank">
264 |                                 <div class="align-self-center btn-facebook m-1 round">
265 |                                     <i class="fab fa-facebook"></i>
266 |                                 </div>
267 |                             </a>
268 |                             <a href="https://www.twitter.com/iakshatmittal" target="_blank">
269 |                                 <div class="align-self-center btn-twitter m-1 round">
270 |                                     <i class="fab fa-twitter"></i>
271 |                                 </div>
272 |                             </a>
273 |                             <a href="https://www.instagram.com/itsreallyakshat" target="_blank">
274 |                                 <div class="align-self-center btn-instagram m-1 round">
275 |                                     <i class="fab fa-instagram"></i>
276 |                                 </div>
277 |                             </a>
278 |                         </div>
279 |                     </div>
280 |                 </div>
281 |                 <div class="row">
282 |                     <div class="col-sm-12">
283 |                         <div class="card">
284 |                             <div class="card-block">
285 |                                 <div>
286 |                                     <h3 class="card-title text-center">Why do I see abbreviated subscriber counts?</h3>
287 |                                 </div>
288 |                                 <div>
289 |                                     <blockquote class="twitter-tweet tw-align-center">
290 |                                         <p lang="en" dir="ltr">According to <a
291 |                                                 href="https://twitter.com/TeamYouTube?ref_src=twsrc%5Etfw">@TeamYouTube</a>,
292 |                                             the abbreviated subscriber counts will be rolling out to YouTube and YouTube
293 |                                             Data API starting September 10th, 2019.</p>&mdash; Akshat Mittal
294 |                                         (@iakshatmittal) <a
295 |                                             href="https://twitter.com/iakshatmittal/status/1170691927030685696?ref_src=twsrc%5Etfw">September
296 |                                             8, 2019</a>
297 |                                     </blockquote>
298 |                                 </div>
299 |                             </div>
300 |                         </div>
301 |                     </div>
302 |                 </div>
303 |                 <div class="row">
304 |                     <div class="col-sm-4">
305 |                         <a class="card" href="https://www.createmytoken.com/token-generator/ethereum-erc20-generator/"
306 |                             target="_blank">
307 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
308 |                                 <span class="font-light m-b-0">ERC20 Token Generator</span>
309 |                             </div>
310 |                         </a>
311 |                     </div>
312 |                     <div class="col-sm-4">
313 |                         <a class="card"
314 |                             href="https://www.createmytoken.com/token-generator/bnb-smart-chain-bep20-generator/"
315 |                             target="_blank">
316 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
317 |                                 <span class="font-light m-b-0">BEP20 Token Generator</span>
318 |                             </div>
319 |                         </a>
320 |                     </div>
321 |                     <div class="col-sm-4">
322 |                         <a class="card" href="https://www.createmytoken.com/solana-token-creator/spl-token/"
323 |                             target="_blank">
324 |                             <div class="no-shadow mb-0 p-2 waves-effect text-center">
325 |                                 <span class="font-light m-b-0">Solana SPL Token Creator</span>
326 |                             </div>
327 |                         </a>
328 |                     </div>
329 |                 </div>
330 |                 <div class="row ads">
331 |                     <div class="col-12">
332 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
333 |                             data-ad-slot="1351565063" data-ad-format="horizontal,rectangle"
334 |                             data-full-width-responsive="true"></ins>
335 |                     </div>
336 |                 </div>
337 |                 <div class="row">
338 |                     <div class="col-sm-12">
339 |                         <div class="card">
340 |                             <div class="card-block">
341 |                                 <div>
342 |                                     <div id="disqus_thread"></div>
343 |                                 </div>
344 |                             </div>
345 |                         </div>
346 |                     </div>
347 |                 </div>
348 |                 <div class="row" id="about">
349 |                     <div class="col-sm-12">
350 |                         <div class="card">
351 |                             <div class="card-block">
352 |                                 <div>
353 |                                     <div>
354 |                                         <h3 class="card-title">About</h3>
355 |                                     </div>
356 |                                 </div>
357 |                                 <div>
358 |                                     <p>YouTube Realtime shows the live subscriber count of any user on YouTube as
359 |                                         accurately
360 |                                         as possible. YouTube often doesn't update the subscriber count on the website in
361 |                                         real time and hence it's hard to keep a track on when you'll hit a new
362 |                                         milestone.
363 |                                         This tool eases the pressure and allows you see the subscribers change live!
364 |                                     </p>
365 |                                     <p>
366 |                                         The subscriber count, view count, video count and comment count are all taken
367 |                                         directly from Google's infrastructure via
368 |                                         the Analytics API. The counts are updated every second and are guaranteed to be
369 |                                         accurate.
370 |                                     </p>
371 |                                     <p>You can enter the channel name in any format. You can also input search terms for
372 |                                         a channel,
373 |                                         this will also try to automatically correct spellings in most cases. This is as
374 |                                         good
375 |                                         as YouTube Search itself since it uses the same engine to search.
376 |                                     </p>
377 |                                     <p>
378 |                                         You can literally enter anything that YouTube supports. Examples:
379 |                                     </p>
380 |                                     <ul>
381 |                                         <li>Channel Username (Example:
382 |                                             <b>MKBHD</b>)
383 |                                         </li>
384 |                                         <li>Channel ID (Example:
385 |                                             <b>UCK8sQmJBp8GCxrOtXWBpyEA</b>)
386 |                                         </li>
387 |                                         <li>Channel Name (Example:
388 |                                             <b>Fine Brothers Entertainment</b>)
389 |                                         </li>
390 |                                         <li>YouTube URL (Example:
391 |                                             <b>youtube.com/mkbhd</b>)
392 |                                         </li>
393 |                                         <li>Search Terms (Example:
394 |                                             <b>Justin Bieber</b>)
395 |                                         </li>
396 |                                         <li>Self Discovery Channels (Example:
397 |                                             <b>#Music</b>)
398 |                                         </li>
399 |                                     </ul>
400 |                                 </div>
401 |                             </div>
402 |                         </div>
403 |                     </div>
404 |                 </div>
405 |                 <div class="row">
406 |                     <div class="col-12">
407 |                         <div class="card">
408 |                             <div class="card-block">
409 |                                 <div class="form-horizontal form-material">
410 |                                     <p>
411 |                                         Thank you for using YouTube Realtime. You can find more information about the
412 |                                         project on
413 |                                         <a href="https://github.com/akshatmittal/youtube-realtime/blob/gh-pages/README.md"
414 |                                             target="_blank">GitHub</a> including license and contributors. You can get
415 |                                         in touch with me on
416 |                                         <a href="https://www.facebook.com/itsreallyakshat" target="_blank">Facebook</a>,
417 |                                         <a href="https://twitter.com/iakshatmittal" target="_blank">Twitter</a> or
418 |                                         <a href="mailto:ytlive@akshatmittal.com" target="_blank">email</a>, if you
419 |                                         prefer. Do let me know if you have any feedback or ideas for this
420 |                                         project!
421 |                                     </p>
422 |                                     <p class="mb-0">
423 |                                         YouTube is a registered trademark of Google.
424 |                                     </p>
425 |                                 </div>
426 |                             </div>
427 |                         </div>
428 |                     </div>
429 |                 </div>
430 |             </div>
431 |             <footer class="footer">&copy; 2020
432 |                 <a href="https://akshatmittal.com">Akshat Mittal</a>
433 |             </footer>
434 |         </div>
435 |     </div>
436 |     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"
437 |         integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
438 |     <script>
439 |         window.Tether = function () { } // I don't want Bootstrap to use Tether.
440 |     </script>
441 |     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
442 |     <script src="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.6/odometer.min.js"></script>
443 |     <script src="//cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
444 |     <script src="../assets/js/waves.js"></script>
445 |     <script>
446 |         $(function () {
447 |             $(".preloader").fadeOut();
448 |         });
449 |     </script>
450 | 
451 |     <script src="../assets/js/base.js"></script>
452 |     <script src="../assets/js/updateManager.vs.js"></script>
453 |     <script src="../assets/js/query.vs.js"></script>
454 |     <script src="../assets/js/multisearch.vs.js"></script>
455 |     <script src="../assets/js/live.vs.js"></script>
456 |     <script src="../assets/js/sharing.vs.js"></script>
457 |     <!-- <script src="../assets/js/urlManager.vs.js"></script> -->
458 |     <script src="../assets/js/init.js"></script>
459 |     <script src="//akshatmittal.disqus.com/embed.js" defer></script>
460 |     <script>
461 |         var isCustomPage = 1;
462 |         setTimeout(function () {
463 |             DISQUS.reset({
464 |                 reload: true,
465 |                 config: function () {
466 |                     this.page.url = "https://akshatmittal.com/youtube-realtime/pewdiepie-vs-cocomelon/";
467 |                     this.page.identifier = "UC-lHJZR3Gqxm24_Vd_AJ5Yw$$UCbCmjCuTUZos6Inko4u57UQ";
468 |                 }
469 |             });
470 |         }, 500)
471 |         YT.live.setVS("UC-lHJZR3Gqxm24_Vd_AJ5Yw", "UCbCmjCuTUZos6Inko4u57UQ");
472 |     </script>
473 | </body>
474 | 
475 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="fragment" content="!" />
  8 |     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
  9 |     <meta name="monetization" content="$ilp.uphold.com/xBWda4QH423A" />
 10 |     <link rel="shortcut icon" type="image/png"
 11 |         href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 12 |     <link rel="icon" type="image/png" href="https://gh.akshatmittal.com/youtube-realtime/assets/images/icon.png">
 13 |     <title>Live YouTube Subscriber Count — YouTube Realtime</title>
 14 | 
 15 |     <link rel="canonical" href="https://gh.akshatmittal.com/youtube-realtime/" />
 16 |     <meta name="twitter:card" content="summary_large_image" />
 17 |     <meta name="twitter:site" content="@iakshatmittal" />
 18 |     <meta name="twitter:title" content="Live YouTube Subscriber Count — YouTube Realtime" />
 19 |     <meta name="twitter:description"
 20 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 21 |     <meta name="twitter:creator" content="@iakshatmittal" />
 22 |     <meta name="twitter:image" content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.png?v=1" />
 23 |     <meta property="og:title" content="Live YouTube Subscriber Count — YouTube Realtime" />
 24 |     <meta property="og:type" content="article" />
 25 |     <meta property="og:url" content="https://gh.akshatmittal.com/youtube-realtime/" />
 26 |     <meta property="og:image" content="https://gh.akshatmittal.com/youtube-realtime/assets/images/sharing.png?v=1" />
 27 |     <meta property="og:description"
 28 |         content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
 29 |     <meta property="og:site_name" content="Akshat Mittal" />
 30 |     <meta property="fb:admins" content="100000581280466" />
 31 |     <meta property="fb:app_id" content="1473140929606808" />
 32 |     <meta property="article:author" content="https://www.facebook.com/itsreallyakshat" />
 33 | 
 34 |     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
 35 |         rel="stylesheet">
 36 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
 37 |         integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
 38 |     <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
 39 |     <link href="assets/css/odometer-theme-custom.css" rel="stylesheet">
 40 |     <link href="assets/css/spinners.css" rel="stylesheet">
 41 |     <link href="assets/css/style.css" rel="stylesheet">
 42 |     <link href="assets/css/colors/light.css" id="theme" rel="stylesheet">
 43 |     <!-- Nah, no Dark Theme for you people (yet) -->
 44 |     <!--[if lt IE 9]>
 45 |     <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 46 |     <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 47 |     <![endif]-->
 48 | </head>
 49 | 
 50 | <body class="fix-header fix-sidebar card-no-border">
 51 |     <div class="preloader">
 52 |         <svg class="circular" viewBox="25 25 50 50">
 53 |             <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
 54 |         </svg>
 55 |     </div>
 56 |     <div class="dark-bg"></div>
 57 |     <div id="main-wrapper">
 58 |         <header class="topbar">
 59 |             <nav class="navbar top-navbar navbar-toggleable-sm navbar-light">
 60 |                 <div class="navbar-header">
 61 |                     <a class="navbar-brand" href="/youtube-realtime/">
 62 |                         <b class="text-white">
 63 |                             <i class="fab fa-youtube"></i>
 64 |                         </b>
 65 |                         <span class="text-white">
 66 |                             YouTube Realtime
 67 |                         </span>
 68 |                     </a>
 69 |                 </div>
 70 |                 <div class="navbar-collapse">
 71 |                     <ul class="navbar-nav mr-auto mt-md-0">
 72 |                         <li class="nav-item">
 73 |                             <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark"
 74 |                                 href="javascript:void(0)">
 75 |                                 <i class="fa fa-bars"></i>
 76 |                             </a>
 77 |                         </li>
 78 |                     </ul>
 79 |                     <form class="mx-2 my-auto d-inline w-100" id="yt_search">
 80 |                         <div class="input-group">
 81 |                             <input type="text" class="form-control form-control" placeholder="Search"
 82 |                                 id="yt_searchvalue" autocomplete="off">
 83 |                             <span class="input-group-btn">
 84 |                                 <button class="btn btn-success" type="button" id="yt_searchbutton">
 85 |                                     <i class="fa fa-search"></i>
 86 |                                 </button>
 87 |                             </span>
 88 |                         </div>
 89 |                     </form>
 90 |                 </div>
 91 |             </nav>
 92 |         </header>
 93 |         <aside class="left-sidebar">
 94 |             <div class="scroll-sidebar">
 95 |                 <nav class="sidebar-nav">
 96 |                     <ul class="sidebarnav">
 97 |                         <li class="nav-small-cap">META</li>
 98 |                         <li>
 99 |                             <a class="waves-effect waves-dark" href="https://www.createmytoken.com/" target="_blank">
100 |                                 <i class="fab fa-ethereum"></i>
101 |                                 <span class="hide-menu">Token Generator</span>
102 |                             </a>
103 |                         </li>
104 |                         <li>
105 |                             <a class="waves-effect waves-dark"
106 |                                 href="https://www.createmytoken.com/solana-token-creator/" target="_blank">
107 |                                 <i class="fa fa-bolt"></i>
108 |                                 <span class="hide-menu">Solana Token Creator</span>
109 |                             </a>
110 |                         </li>
111 |                         <li>
112 |                             <a class="waves-effect waves-dark"
113 |                                 href="https://www.createmytoken.com/solana-token-creator/spl-token/" target="_blank">
114 |                                 <i class="fa fa-bolt"></i>
115 |                                 <span class="hide-menu">Solana SPL Token Creator</span>
116 |                             </a>
117 |                         </li>
118 |                         <li>
119 |                             <a class="waves-effect waves-dark" href="https://www.metacrypt.org/" target="_blank">
120 |                                 <i class="fab fa-ethereum"></i>
121 |                                 <span class="hide-menu">Metacrypt</span>
122 |                             </a>
123 |                         </li>
124 |                         <li>
125 |                             <a class="waves-effect waves-dark" href="./live-view-count/" target="_blank">
126 |                                 <i class="fa fa-eye"></i>
127 |                                 <span class="hide-menu">Live View Count</span>
128 |                             </a>
129 |                         </li>
130 |                         <li>
131 |                             <a class="waves-effect waves-dark" href="./pewdiepie-vs-cocomelon/" target="_blank">
132 |                                 <i class="fa fa-chart-bar"></i>
133 |                                 <span class="hide-menu">PewDiePie vs Cocomelon</span>
134 |                             </a>
135 |                         </li>
136 |                         <li>
137 |                             <a class="waves-effect waves-dark" href="./pewdiepie-vs-mrbeast/" target="_blank">
138 |                                 <i class="fa fa-chart-bar"></i>
139 |                                 <span class="hide-menu">PewDiePie vs MrBeast</span>
140 |                             </a>
141 |                         </li>
142 |                         <li>
143 |                             <a class="waves-effect waves-dark" href="./compare/" target="_blank">
144 |                                 <i class="fa fa-chart-bar"></i>
145 |                                 <span class="hide-menu">Compare Multiple</span>
146 |                             </a>
147 |                         </li>
148 |                     </ul>
149 |                 </nav>
150 |             </div>
151 |         </aside>
152 |         <div class="page-wrapper">
153 |             <div class="container super-search nosel">
154 |                 <div class="row">
155 |                     <div class="col-12">
156 |                         <div class="card">
157 |                             <div class="card-block">
158 |                                 <div>
159 |                                     <h3 class="card-title text-center">Compare with?</h3>
160 |                                 </div>
161 |                                 <form class="mx-2 my-auto d-inline w-100" id="yt_search_m">
162 |                                     <div class="input-group">
163 |                                         <input type="text" class="form-control form-control" placeholder="Search"
164 |                                             id="yt_searchvalue_m" autocomplete="off">
165 |                                         <span class="input-group-btn">
166 |                                             <button class="btn btn-success" type="button" id="yt_searchbutton_m">
167 |                                                 <i class="fa fa-search"></i>
168 |                                             </button>
169 |                                         </span>
170 |                                     </div>
171 |                                 </form>
172 |                                 <div class="results" id="results">
173 | 
174 |                                 </div>
175 |                                 <div>
176 |                                     <button class="btn btn-danger w-100" id="yt_comrest">
177 |                                         <i class="fa fa-times"></i> Close
178 |                                     </button>
179 |                                 </div>
180 |                             </div>
181 |                         </div>
182 |                     </div>
183 |                 </div>
184 |             </div>
185 |             <div class="container">
186 |                 <div class="row ads">
187 |                     <div class="col-12">
188 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
189 |                             data-ad-slot="5753559092" data-ad-format="horizontal"
190 |                             data-full-width-responsive="true"></ins>
191 |                     </div>
192 |                 </div>
193 |                 <div class="row">
194 |                     <!-- Column -->
195 |                     <div class="col-sm-12">
196 |                         <div class="card m-b-0 m-t-20">
197 |                             <img class="card-img-top img-responsive" src="assets/images/banner.jpg" id="yt_cover"
198 |                                 style="max-height:200px;">
199 |                             <div class="card-block little-profile p-b-0 text-center">
200 |                                 <div class="pro-img">
201 |                                     <img src="assets/images/icon.png" alt="user" id="yt_profile">
202 |                                 </div>
203 |                                 <h3 class="display-6 m-b-15 m-t-10 text-center yt_name" id="yt_name">Akshat Mittal</h3>
204 |                             </div>
205 |                             <div class="card-block text-center p-t-0">
206 |                                 <div class="card-body">
207 |                                     <div class="position-relative">
208 |                                         <div class="white">
209 |                                             <h1 class="display-1" id="yt_subs">00,000,000</h1>
210 |                                             <span>Subscribers</span>
211 |                                         </div>
212 |                                     </div>
213 |                                 </div>
214 |                             </div>
215 |                         </div>
216 |                     </div>
217 |                 </div>
218 |                 <div class="row" id="sharer">
219 |                     <div class="col-12">
220 |                         <div class="card-block text-center">
221 |                             <div class="text-center p-t-0 row">
222 |                                 <div class="col-12 col-md-4">
223 |                                     <div class="card no-shadow btn-youtube mb-0 p-2 waves-effect" id="yt_shareyt">
224 |                                         <span class="font-light m-b-0"><i class="fab fa-youtube"></i> Visit</span>
225 |                                     </div>
226 |                                 </div>
227 |                                 <!-- <div class="col-6 col-md-3">
228 |                                     <div class="card no-shadow btn-compare mb-0 p-2 waves-effect" id="yt_compare">
229 |                                         <span class="font-light m-b-0"><i class="fa fa-chart-bar"></i> Compare</span>
230 |                                     </div>
231 |                                 </div> -->
232 |                                 <div class="col-6 col-md-4">
233 |                                     <div class="card no-shadow btn-archive mb-0 p-2 waves-effect" id="yt_sharear">
234 |                                         <span class="font-light m-b-0"><i class="fa fa-fire"></i> Compare</span>
235 |                                     </div>
236 |                                 </div>
237 |                                 <div class="col-6 col-md-4">
238 |                                     <div class="card no-shadow btn-twitter mb-0 p-2 waves-effect" id="yt_sharetw">
239 |                                         <span class="font-light m-b-0"><i class="fab fa-twitter"></i> Twitter</span>
240 |                                     </div>
241 |                                 </div>
242 |                             </div>
243 |                         </div>
244 |                     </div>
245 |                 </div>
246 |                 <div class="row ads">
247 |                     <div class="col-12">
248 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
249 |                             data-ad-slot="6272433842" data-ad-format="horizontal" data-full-width-responsive="true"
250 |                             style="max-height: 90px;"></ins>
251 |                     </div>
252 |                 </div>
253 |                 <div class="row">
254 |                     <div class="col-sm-12" id="yt_sharear2">
255 |                         <div class="row">
256 |                             <div class="col-12 col-lg-7">
257 |                                 <div class="card">
258 |                                     <div class="card-block">
259 |                                         <div class="card-body">
260 |                                             <div class="position-relative">
261 |                                                 <div class="mt-2 ml-2 white">
262 |                                                     <h1 class="display-5" id="yt_views">00,000,000,000</h1>
263 |                                                     <span>Views</span>
264 |                                                 </div>
265 |                                             </div>
266 |                                         </div>
267 |                                     </div>
268 |                                 </div>
269 |                             </div>
270 |                             <div class="col-12 col-lg-5">
271 |                                 <div class="card">
272 |                                     <div class="card-block">
273 |                                         <div class="card-body">
274 |                                             <div class="position-relative">
275 |                                                 <div class="mt-2 ml-2 white">
276 |                                                     <h1 class="display-5" id="yt_videos">0,000</h1>
277 |                                                     <span>Videos</span>
278 |                                                 </div>
279 |                                             </div>
280 |                                         </div>
281 |                                     </div>
282 |                                 </div>
283 |                             </div>
284 |                         </div>
285 |                     </div>
286 |                 </div>
287 |                 <div class="row">
288 |                     <div class="col-sm-12">
289 |                         <div class="card-block text-center p-t-0">
290 |                             <a href="https://www.facebook.com/itsreallyakshat" target="_blank">
291 |                                 <div class="align-self-center btn-facebook m-1 round">
292 |                                     <i class="fab fa-facebook"></i>
293 |                                 </div>
294 |                             </a>
295 |                             <a href="https://www.twitter.com/iakshatmittal" target="_blank">
296 |                                 <div class="align-self-center btn-twitter m-1 round">
297 |                                     <i class="fab fa-twitter"></i>
298 |                                 </div>
299 |                             </a>
300 |                             <a href="https://www.instagram.com/itsreallyakshat" target="_blank">
301 |                                 <div class="align-self-center btn-instagram m-1 round">
302 |                                     <i class="fab fa-instagram"></i>
303 |                                 </div>
304 |                             </a>
305 |                         </div>
306 |                     </div>
307 |                 </div>
308 |                 <div class="row">
309 |                     <div class="col-sm-12">
310 |                         <div class="card">
311 |                             <div class="card-block">
312 |                                 <div>
313 |                                     <h3 class="card-title text-center">Why do I see abbreviated subscriber counts?</h3>
314 |                                 </div>
315 |                                 <div>
316 |                                     <blockquote class="twitter-tweet tw-align-center">
317 |                                         <p lang="en" dir="ltr">According to <a
318 |                                                 href="https://twitter.com/TeamYouTube?ref_src=twsrc%5Etfw">@TeamYouTube</a>,
319 |                                             the abbreviated subscriber counts will be rolling out to YouTube and YouTube
320 |                                             Data API starting September 10th, 2019.</p>&mdash; Akshat Mittal
321 |                                         (@iakshatmittal) <a
322 |                                             href="https://twitter.com/iakshatmittal/status/1170691927030685696?ref_src=twsrc%5Etfw">September
323 |                                             8, 2019</a>
324 |                                     </blockquote>
325 |                                 </div>
326 |                             </div>
327 |                         </div>
328 |                     </div>
329 |                 </div>
330 |                 <div class="row ads">
331 |                     <div class="col-12">
332 |                         <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3188055178160882"
333 |                             data-ad-slot="1351565063" data-ad-format="horizontal,rectangle"
334 |                             data-full-width-responsive="true"></ins>
335 |                     </div>
336 |                 </div>
337 |                 <div class="row">
338 |                     <div class="col-sm-12">
339 |                         <div class="card">
340 |                             <div class="card-block">
341 |                                 <div>
342 |                                     <h3 class="card-title text-center">What do you think about <span
343 |                                             class="yt_name">.</span>?</h3>
344 |                                 </div>
345 |                                 <div>
346 |                                     <div id="disqus_thread"></div>
347 |                                 </div>
348 |                             </div>
349 |                         </div>
350 |                     </div>
351 |                 </div>
352 |                 <div class="row" id="about">
353 |                     <div class="col-sm-12">
354 |                         <div class="card">
355 |                             <div class="card-block">
356 |                                 <div>
357 |                                     <div>
358 |                                         <h3 class="card-title">About</h3>
359 |                                     </div>
360 |                                 </div>
361 |                                 <div>
362 |                                     <p>YouTube Realtime shows the live subscriber count of any user on YouTube as
363 |                                         accurately
364 |                                         as possible. YouTube often doesn't update the subscriber count on the website in
365 |                                         real time and hence it's hard to keep a track on when you'll hit a new
366 |                                         milestone.
367 |                                         This tool eases the pressure and allows you see the subscribers change live!
368 |                                     </p>
369 |                                     <p>
370 |                                         The subscriber count, view count, video count and comment count are all taken
371 |                                         directly from Google's infrastructure via
372 |                                         the Analytics API. The counts are updated every second and are guaranteed to be
373 |                                         accurate.
374 |                                     </p>
375 |                                     <p>You can enter the channel name in any format. You can also input search terms for
376 |                                         a channel,
377 |                                         this will also try to automatically correct spellings in most cases. This is as
378 |                                         good
379 |                                         as YouTube Search itself since it uses the same engine to search.
380 |                                     </p>
381 |                                     <p>
382 |                                         You can literally enter anything that YouTube supports. Examples:
383 |                                     </p>
384 |                                     <ul>
385 |                                         <li>Channel Username (Example:
386 |                                             <b>MKBHD</b>)
387 |                                         </li>
388 |                                         <li>Channel ID (Example:
389 |                                             <b>UCK8sQmJBp8GCxrOtXWBpyEA</b>)
390 |                                         </li>
391 |                                         <li>Channel Name (Example:
392 |                                             <b>Fine Brothers Entertainment</b>)
393 |                                         </li>
394 |                                         <li>YouTube URL (Example:
395 |                                             <b>youtube.com/mkbhd</b>)
396 |                                         </li>
397 |                                         <li>Search Terms (Example:
398 |                                             <b>Justin Bieber</b>)
399 |                                         </li>
400 |                                         <li>Self Discovery Channels (Example:
401 |                                             <b>#Music</b>)
402 |                                         </li>
403 |                                     </ul>
404 |                                 </div>
405 |                             </div>
406 |                         </div>
407 |                     </div>
408 |                 </div>
409 |                 <div class="row" id="embeds">
410 |                     <div class="col-sm-12">
411 |                         <div class="card">
412 |                             <div class="card-block">
413 |                                 <div>
414 |                                     <div>
415 |                                         <h3 class="card-title">Sharing</h3>
416 |                                     </div>
417 |                                 </div>
418 |                                 <div class="form-horizontal form-material">
419 |                                     <p>You can share the live subscriber counts for any channel on YouTube by sharing
420 |                                         the following
421 |                                         URL. Sharing buttons for YouTube, Facebook and Twitter are also available right
422 |                                         below
423 |                                         the subscriber count. You can also bookmark (Ctrl/Cmd + D) the current URL to
424 |                                         come
425 |                                         back anytime!</p>
426 |                                     <div class="form-group">
427 |                                         <div class="col-md-12">
428 |                                             <input type="text" name="url" value="..wait.." id="yt_shareurl"
429 |                                                 onclick="this.select()" readonly=""
430 |                                                 class="form-control form-control-line text-center"></input>
431 |                                         </div>
432 |                                     </div>
433 |                                 </div>
434 |                                 <div>
435 |                                     <div>
436 |                                         <h3 class="card-title">Embeds</h3>
437 |                                     </div>
438 |                                 </div>
439 |                                 <div class="form-horizontal form-material">
440 |                                     <p>You can also embed the live subscriber counts for any channel on your own website
441 |                                         by copying the following embed code in your HTML. Embeds are available as a
442 |                                         small or a large embed. <a href="https://counts.live/embeds" target="_blank"
443 |                                             rel="noopener noreferrer">More details here.</a></p>
444 |                                     <h5>Small Embed</h5>
445 |                                     <div class="form-group">
446 |                                         <div class="col-md-12">
447 |                                             <input type="text" name="embed_small" value="..wait.." id="yt_embed_small"
448 |                                                 onclick="this.select()" readonly=""
449 |                                                 class="form-control form-control-line text-center"></input>
450 |                                         </div>
451 |                                     </div>
452 |                                     <h5>Large Embed</h5>
453 |                                     <div class="form-group">
454 |                                         <div class="col-md-12">
455 |                                             <input type="text" name="embed_large" value="..wait.." id="yt_embed_large"
456 |                                                 onclick="this.select()" readonly=""
457 |                                                 class="form-control form-control-line text-center"></input>
458 |                                         </div>
459 |                                     </div>
460 |                                 </div>
461 |                             </div>
462 |                         </div>
463 |                     </div>
464 |                 </div>
465 |                 <div class="row">
466 |                     <div class="col-12">
467 |                         <div class="card">
468 |                             <div class="card-block">
469 |                                 <div class="form-horizontal form-material">
470 |                                     <p>
471 |                                         Thank you for using YouTube Realtime. You can find more information about the
472 |                                         project on
473 |                                         <a href="https://github.com/akshatmittal/youtube-realtime/blob/gh-pages/README.md"
474 |                                             target="_blank">GitHub</a> including license and contributors. You can get
475 |                                         in touch with me on
476 |                                         <a href="https://www.facebook.com/itsreallyakshat" target="_blank">Facebook</a>,
477 |                                         <a href="https://twitter.com/iakshatmittal" target="_blank">Twitter</a> or
478 |                                         <a href="mailto:ytlive@akshatmittal.com" target="_blank">email</a>, if you
479 |                                         prefer. Do let me know if you have any feedback or ideas for this
480 |                                         project!
481 |                                     </p>
482 |                                     <p class="mb-0">
483 |                                         YouTube is a registered trademark of Google.
484 |                                     </p>
485 |                                 </div>
486 |                             </div>
487 |                         </div>
488 |                     </div>
489 |                 </div>
490 |             </div>
491 |             <footer class="footer">&copy; 2020
492 |                 <a href="https://akshatmittal.com">Akshat Mittal</a>
493 |             </footer>
494 |         </div>
495 |     </div>
496 |     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"
497 |         integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
498 |     <script>
499 |         window.Tether = function () { } // I don't want Bootstrap to use Tether.
500 |     </script>
501 |     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
502 |     <script src="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.6/odometer.min.js"></script>
503 |     <script src="//cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
504 |     <script src="assets/js/waves.js"></script>
505 |     <script src="assets/js/custom-ui.js"></script>
506 | 
507 |     <script src="assets/js/base.js"></script>
508 |     <script src="assets/js/featured.core.js"></script>
509 |     <script src="assets/js/updateManager.core.js"></script>
510 |     <script src="assets/js/query.core.js"></script>
511 |     <script src="assets/js/multisearch.core.js"></script>
512 |     <script src="assets/js/live.core.js"></script>
513 |     <script src="assets/js/sharing.core.js"></script>
514 |     <script src="assets/js/urlManager.core.js"></script>
515 |     <script src="assets/js/init.js"></script>
516 |     <script src="//akshatmittal.disqus.com/embed.js" defer></script>
517 | </body>
518 | 
519 | </html>


--------------------------------------------------------------------------------