SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html lang="en">3 <head>4 <title>5 YouCount: YouTube Live Subscriber Count (Live Sub Count)6 </title>7 <meta content="#e61919" name="theme-color">8 <meta content="YouCount" name="apple-mobile-web-app-title">9 <meta content="YouCount" name="application-name">10 <meta content="#e61919" name="msapplication-TileColor">11 <meta charset="utf-8">12 <meta content="Thu, 10 Jan 2030 12:00:00 GMT" http-equiv="EXPIRES">13 <meta content="width=device-width, initial-scale=1.0" name="viewport">14 <meta content="See the live growth of any YouTube channel through their subcriber count updated in realtime. See collected insights about your favorite YouTubers. Add subscriber counts to your own website." name="description">15 <meta content="YouCount: YouTube Live Subscriber Count (Live Sub Count)" property="og:title">16 <meta content="See the live growth of any YouTube channel through their subcriber count updated in realtime. See collected insights about your favorite YouTubers. Add subscriber counts to your own website." property="og:description">17 <meta content="article" property="og:type">18 <meta content="" property="og:image">19 <meta content="YouCount" property="og:site_name">20 <meta content="" property="article:author">21 <style>22 #search,.navButtonsCover .navButtons{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd0AAABGCAMAAAC+Nb5oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0Nzk5OWVkZC01ZWUyLWU3NGMtYjQzOC1jYjEzNDk5MWUyNGYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkM2MTYxMTk4OEZCMTFFN0E0RkY5QTAwNkRCMTYzMzIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkM2MTYxMTg4OEZCMTFFN0E0RkY5QTAwNkRCMTYzMzIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDY0NUZGRUY4Njc1MTFFN0I5MTdEQTcwMDU2Q0NCMzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDY0NUZGRjA4Njc1MTFFN0I5MTdEQTcwMDU2Q0NCMzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5g/RDXAAAACVBMVEX////lLScAAAA8bF9eAAAAA3RSTlP//wDXyg1BAAAEe0lEQVR42uzd2XIbIRAF0Kv+/49OVapScawBerm9iHjeLEuzcAZoGkaCnDacN2Ft7P0N2PiFZDm4VVK7+YvhJuLmK0IKrf1qctuECbYd14M0W8vl5Lf5E3Bpl6PeGTJxlZdT06cPwGVcjWl/yLRV3mCo4i29YRKuxrzLbF1EcZkYle1BwtXYd4lk3HPjUT/gKtZ9+pNou9snsnERxiUHI8W6rIO7SihfF+awMou3UvfhUKGj+wp5lm7uSLFQF2TdRVmcSgjpuHCF95fockL2TUHsi6hAF+Zb0jyuGxdUJela/9mqu31TUHdzn2/ekjqyDmfgzf8eU3djSZnnT+9LIbMeM3X1xfigi0bd7anHdRddeUHiiqgbKcVuXVF0KIEiwfK13BBrFyhmpE8bdRVnZu6VTYmiB13U6/rqri0pNE/3+xKCeNXdDw5VI0VWjpnVMPveNkJX0nSP3S6f95igycBdVN6xuoE9QKObxLu4+uiN6o3jhurScd/rTnA0fUgdkQpD/5n/TleUugicnHXCS3J18Qm6fFzZTlVEGl8DbVZMZdF9/d6eXnx847eNv/qVk3F3TLEoe9aVOaEkLJ8i62pxEcMFBVcOTWkgbMKqPrNu8w5dNS4GtMssXVvzS+qh4slXs64eFwPaZTmEWozFuYwDDNE14GIArpxiLVPowutYp9bdrJg5B1czQnW0+9lr62/T5dR6ydUlTVM26r424i+bdXl62aBr4d0vXMuba/LHzDref18x4qK/Xd7NpNlX1sfn9Tp133hjuCipujpcGBv0z9GFWncbEZtxvbpEXKWuZwVE/QqesC6YuOivuspFo+N0JUcXRNwSXUrLPFXXPb+r5Q3goqBh9gdVwX4Xn6mLxyzUK7XusrLTJl37iEjqeI2n5smKnwbDM3QdeUjqeBedldej+1rP+6XrBm507RwCO1eFtsoLlq6Dt6bqRnXtuU7a+s8or2+Z17OjZXqoVPe8MAMxXMequLC65gQVDZNa18xb1DBveClzCNo4JXQAB++mYRKHrpW3Tle5ljlQ9pauiNRqH3awixhdukbeqbqkVXNYQNI6ZehCfvMTnks1E2+h7rPYUdd5hN0SOWbMpVnY89jxDFrPzIk9t6vXhNEnKtfIIYkX+1bkbl3ZlQMp4FFWpSxe9e6n6jJGiO+65GhWqUAOnS0rMq/WRU7VNSkYhq1e3mUIcaPuG1xxfhiWyC7uu4kQ5z6dTWybsc0P5x+fN5mkeu7hdl0x6NZN3HEOqBgdlepKn65i5u7TdP/sShVNtn4bWTZvUVkr0/rpxfEeyl2qK4pwtXrBTH5xvIVat+qK4ouvP+R7IgPh5CDdrDui4Tar7wseeZu/fftHN5X3R7eMt+gkvpbh/6TbN+Auvce+TkKK9P5iTb5uT3S3SpdV/igDfnTzi7h8BLG8szqHQze1zMsyrTy2QHJ5ZYDuMnXXwFt57Bm/4Vmh25cN7Uns/B0RpfkGSkOu5C0/AU0gUJSAvE5XmnHF+nRCZmL5Pt38RwT32y8BBgDINqoX+oHxQgAAAABJRU5ErkJggg==);background-size:auto 100%}body{background-color:#fafafa;font-family:Roboto,Oxygen,'Open Sans',-apple-system,BlinkMacSystemFont,Ubuntu,Cantarell,'Segoe UI','Helvetica Neue',Arial,sans-serif;font-weight:100;outline:0;margin:0;overflow-x:hidden!important;-webkit-tap-highlight-color:transparent;-webkit-transition:background-color .5s linear;transition:background-color .5s linear}img{color:transparent}ul{list-style-type:none}#menu{position:fixed;width:100vw;height:50px;box-shadow:0 0 20px -4px #000;left:0;top:0;z-index:1001;background-color:#e61919;backface-visibility:hidden}.navButtonsCover{position:relative;height:100%;width:15vh;min-height:40px;float:right;top:0;cursor:pointer;-webkit-transition:background-color .5s linear;transition:background-color .5s linear}.navButtonsCover .navButtons{position:relative;top:10%;left:50%;-webkit-transform:translate(-50%,7.5px);transform:translate(-50%,7.5px);height:25px;width:25px}.navButtonsCover[data-child=logo]{float:left}#logo{width:36px;background-position:0 0}#help{background-position:-40px 0}#code{background-position:-71.5px 0}#share{background-position:-107px 0}#sharebox{position:fixed;top:60px;right:5px;margin:0;padding:0;list-style-type:none}.share{height:50px;width:50px;margin-bottom:5px;border-radius:50%;cursor:pointer;display:none}#tw{background-position:-50px 0}#lnkdIn{background-position:-100px 0}#tb{background-position:0 -50px}#rdit{background-position:-50px -50px}#link{background-position:-100px -50px}#pageUrl{position:fixed;top:20%;z-index:1010;background-color:#fff;box-shadow:0 0 20px -4px #000;font-size:35px;display:none}#pageUrl input{border:none;outline:0;font-family:Roboto,Oxygen,'Open Sans',-apple-system,BlinkMacSystemFont,Ubuntu,Cantarell,'Segoe UI','Helvetica Neue',Arial,sans-serif;font-weight:100;font-size:30px;background-color:gray;color:#fff}#pageUrl,#pageUrl input{text-align:center;width:80%;left:10%;border-radius:4px;padding:0;margin:0;padding-top:20px;padding-bottom:20px;margin-top:20px;margin-bottom:20px}#tutorial{display:none;z-index:1003;position:absolute;height:auto;max-width:100%;width:500px;background-color:rgba(0,0,0,.7);border-radius:10px;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#pointer{position:absolute;bottom:100%;border:25px solid transparent;border-bottom:30px solid rgba(0,0,0,.7);left:50%;z-index:1003;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#tutorial p,.tutStep2{color:#fff}#tutStep1{font-size:50px;text-align:center;font-weight:900;margin-left:15px;margin-right:15px}#tutStep2{display:none;margin-left:15px;margin-right:15px}#tutorial h3{font-size:25px}ol li{padding-top:5px;padding-bottom:5px}.ball{-webkit-transform:translate3d(0,-100%,0) scale(0,0);transform:translate3d(0,-100%,0) scale(0,0);opacity:0}#bg1{display:block;overflow-x:hidden;-webkit-transition:all .5s linear;transition:all .5s linear;min-height:100%;width:100%;right:0;top:0;position:fixed;background-color:#fff;z-index:501}#bg1 div{margin-top:60px;-webkit-transition:all .5s;transition:all .5s;opacity:0;display:none}#bg1 h2{text-align:center;font-size:6vw;margin:0}#bg1 ol,#bg1 p{font-size:20px;text-align:left;margin-left:20px;margin-right:20px}#bg1 a{color:#e61919;font-weight:600}#bg1 .extraToggle{display:block}#bg2{display:none;left:0;top:0;background-color:rgba(0,0,0,.5);z-index:1001;height:100%;width:100%;position:fixed}#mainPage{position:absolute;width:100%;left:0;bottom:0;top:50px;margin-left:auto;margin-right:auto;text-align:center}.card{position:relative;width:80%!important;height:auto;margin:20px auto;font-size:1vw;box-shadow:0 0 20px -4px #000;border-radius:4px!important;background-color:#fff;backface-visibility:hidden}#prime{padding-top:30px;padding-bottom:30px}#actualCount{font-size:11vw!important}#pubDate,#totalVideos,#totalViews{font-size:3vw!important;line-height:1;font-weight:400}label[for=username]{display:inline-block}#dp{display:none;height:8vw;margin-right:1vw;border-radius:6vw;cursor:pointer}#input button,#username{border:none;outline:0}#topPrime{position:relative}#input{display:inline-block;position:relative;height:8vw;margin-left:1vw;width:75%;background-color:#e6e6e6;-webkit-transition:background-color .25s;transition:background-color .25s;border-radius:3px}#input button{height:100%;background-color:#e61919;width:8vw;overflow:hidden;cursor:pointer;position:absolute;top:0;right:0;display:none;padding:0;opacity:0}#username{color:#000;font-size:2.5vw;font-family:Roboto,Oxygen,'Open Sans',-apple-system,BlinkMacSystemFont,Ubuntu,Cantarell,'Segoe UI','Helvetica Neue',Arial,sans-serif;font-weight:100;text-align:center;float:left;height:100%;width:100%;padding:0;background-color:transparent;-webkit-transition:width .25s;transition:width .25s;border-radius:3px 0 0 3px}#search{height:40px;max-height:60%;width:40px;max-width:60%;margin-left:auto;margin-right:auto;background-position:100% 0;background-repeat:no-repeat}#username:focus{background-color:#ffc8c8;width:90%;width:calc(100% - 8vw);-webkit-box-shadow:inset 0 -5px 0 0 #e61919;box-shadow:inset 0 -5px 0 0 #e61919}#username:focus~#inputButton{opacity:1}#suggest{position:absolute;left:0;top:8vw;z-index:400;width:100%;display:none;box-shadow:0 4px 10px -4px #000;list-style-type:none;padding:0;margin:0;overflow:hidden;background-color:#fff}.suggest{color:#000;cursor:pointer;height:50px;padding-bottom:10px;padding-top:10px}.suggest div{font-size:25px;position:relative;text-align:left;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.suggest:hover{background-color:#e61919;color:#fff}.suggestImg{float:left;width:50px;height:50px;border-radius:50%;margin-left:10px;margin-right:10px;visibility:hidden}#bottomPrime{width:100%;position:relative}#extra{font-weight:400;padding-top:15px;padding-bottom:15px}#extraContent{display:none}#extra table{border-collapse:collapse;font-size:2vw;font-weight:100;margin-left:auto;margin-right:auto;text-align:center}#extra td,#extra th{text-align:left;vertical-align:center;padding-top:10px;padding-bottom:10px;padding-left:2vw;padding-right:2vw;border-bottom:1px solid #ddd}#milestoneBox{font-size:3vw;font-weight:100}.chartWrapper{width:80%;margin-left:auto;margin-right:auto}#hideextra{display:none}.extraToggle{border:none;outline:0;background-color:#e61919;color:#fff;min-width:180px;height:50px;width:15vw;margin-top:20px;margin-bottom:20px;margin-left:auto;margin-right:auto;font-size:18px;border-radius:4px;font-weight:900;cursor:pointer;overflow:hidden;z-index:2;text-transform:uppercase}#vidsText{font-size:25px}#vids{text-align:center;width:5vw;margin:1vw;font-size:25px;border:0;border-bottom:.5vw solid #e61919;background-color:rgba(200,200,200,.3)}#tos-notice{position:fixed;width:100vw;bottom:0;left:0;z-index:1003;background-color:#fafafa;padding:10px;text-align:center}a{text-decoration:none}@media only screen and (max-width:800px),screen and (orientation:portrait){.navButtonsCover{width:25%}#bg1 h2{font-size:12vw}#pageUrl,#pageUrl input{width:100%;left:0}.card{width:98%!important;font-size:3vw}#extra table{font-size:5vw}#milestoneBox{font-size:8vw}#actualCount{font-size:15vw!important}#pubDate,#totalVideos,#totalViews{font-size:8vw!important}#username:focus{width:84%;width:calc(100% - 12vw)}#username{font-size:4vw}#dp,#input{height:12vw}#suggest{top:12vw}#input button{width:12vw}.extraToggle{width:30vw}.chartWrapper{width:95%}}23 </style>24 <style>25 /* Odometer */26.odometer.odometer-auto-theme,.odometer.odometer-auto-theme .odometer-digit,.odometer.odometer-theme-minimal,.odometer.odometer-theme-minimal .odometer-digit{display:inline-block;position:relative}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer{display:inline-block;visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner{text-align:left;display:block;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon{display:block}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner{display:block;backface-visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-value,.odometer.odometer-theme-minimal .odometer-digit .odometer-value{display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,.odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value{position:absolute}.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner{-webkit-transition:-webkit-transform .5s;transition:transform .5s}.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner{-webkit-transition:-webkit-transform .5s;transition:transform .5s;-webkit-transform:translateY(0);transform:translateY(0)}27 </style>28 </head>29 <body>30 <section id="menu">31 <div class="navButtonsCover" data-child="logo" onclick="handleNavButtons(1)">32 <div alt="YouCount Logo/Homepage" class="navButtons" id="logo">33 </div>34 </div>35 <div class="navButtonsCover" data-child="share" onclick="handleNavButtons(4)">36 <div alt="Share button" class="navButtons" id="share">37 </div>38 </div>39 <div class="navButtonsCover" data-child="code" onclick="handleNavButtons(3)">40 <div alt="Get YouCount embed or widget" class="navButtons" id="code">41 </div>42 </div>43 <div class="navButtonsCover" data-child="help" onclick="handleNavButtons(2)">44 <div alt="Help button" class="navButtons" id="help">45 </div>46 </div>47 <ul id="sharebox">48 <li class="share" id="fb" style='background-image: url("/images/social.png");'>49 </li>50 <li class="share" id="tw" style='background-image: url("/images/social.png");'>51 </li>52 <li class="share" id="lnkdIn" style='background-image: url("/images/social.png");'>53 </li>54 <li class="share" id="tb" style='background-image: url("/images/social.png");'>55 </li>56 </ul>57 </section>58 <span id="pageUrl">59 Shareable Link60 <br>61 <input onclick="this.select()" readonly type="text" value>62 </span>63 <div data-fx-opacity="1" id="tutorial" style="display: block; opacity: 1; top: 237.391px;">64 <div id="pointer">65 </div>66 <p id="tutStep1" style="display: block;">67 Click Here68 </p>69 <div id="tutStep2" style="display: none;">70 <h3 class="tutStep2">71 Search for a YouTube channel72 </h3>73 <span class="tutStep2">74 For example, to see Fine Brothers Entertainment's live YouTube subscriber count, type in any one of these:75 </span>76 <ol class="tutStep2">77 <li>78 <b>79 TheFineBros80 </b>81 (their username)82 </li>83 <li>84 <b>85 Fine Brothers Entertainment86 </b>87 (their YouTube channel name)88 </li>89 <li>90 <b>91 UC0v-tlzsn0QZwJnkiaUSJVQ92 </b>93 (their YouTube channel ID)94 </li>95 <li>96 <b>97 fine bros98 </b>99 (a search query)100 </li>101 </ol>102 </div>103 </div>104 <div class="bg ball" id="bg1">105 <div id="helpArt">106 <h2>107 About YouCount108 </h2>109 <p>110 YouTube updates the number of subscribers a channel has (its subscriber count) after a long time.111 </p>112 <p>113 On YouCount, the subscriber count, of any YouTube channel, is live and is updated every second!114 </p>115 <p>116 SHOW STATS button can be clicked to see extra insights of the YouTube channel.117 </p>118 <p>119 YouCount has been specifically designed using the Material Design language to make it look awesome! It is also optimized for mobile devices and has been made to work even with older browsers.120 </p>121 <p>122 To know more or to get in contact:123 </p>124 <ol>125 <li>126 <a>127 Visit the GitHub Project site128 </a>129 </li>130 <li>131 Send an Email:132 <a id="email">133 manas.khurana20@gmail.com134 </a>135 </li>136 </ol>137 <p>138 </p>139 <p>140 Support the website by sharing it with your friends!141 </p>142 <input class="extraToggle" onclick="tutorial.func(0)" type="button" value="How to Use">143 </div>144 <div id="codeArt">145 <h2>146 Embed This!147 </h2>148 <p>149 Copy the code below and paste it where you want to embed this:150 </p>151 <p>152 <code id="embedUrl">153 </code>154 </p>155 <p>156 Adjust its size by changing the "height" and "width" attribute of the iframe.157 The size will automatically adjust to the size of the iframe.158 </p>159 </div>160 </div>161 <div class="bg" data-fx-opacity="1" id="bg2" style="display: block; opacity: 1;">162 </div>163 <div id="tos-notice">164 By using YouCount, you are agreeing to be bound by the165 <a>166 YouTube Terms of Service.167 </a>168 <button onclick="document.getElementById('tos-notice').style.display = 'none'">169 I agree170 </button>171 </div>172 <div id="mainPage">173 <section class="card" id="prime">174 <div id="topPrime">175 <label for="username">176 <img alt="Channel Image" id="dp">177 </label>178 <div id="input" style="z-index: 1004;">179 <input aria-label="Click here to search for a channel" id="username" onkeypress="trigenter(event)" placeholder="Search for a YouTube channel" type="text" value="Loading...">180 <button id="inputButton">181 <div id="search">182 </div>183 </button>184 <ul id="suggest" style="z-index: 1004;">185 <li class="suggest" id="suggest1">186 <img class="suggestImg">187 <div>188 </div>189 </li>190 <li class="suggest">191 <img class="suggestImg">192 <div>193 </div>194 </li>195 <li class="suggest">196 <img class="suggestImg">197 <div>198 </div>199 </li>200 <li class="suggest">201 <img class="suggestImg">202 <div>203 </div>204 </li>205 </ul>206 </div>207 </div>208 <div id="bottomPrime">209 <br>210 <span class="odometer odometer-auto-theme" id="actualCount">211 <div class="odometer-inside">212 <span class="odometer-digit">213 <span class="odometer-digit-spacer">214 8215 </span>216 <span class="odometer-digit-inner">217 <span class="odometer-ribbon">218 <span class="odometer-ribbon-inner">219 <span class="odometer-value">220 0221 </span>222 </span>223 </span>224 </span>225 </span>226 </div>227 </span>228 <br>229 </div>230 </section>231 <section class="card" id="extra">232 <button class="extraToggle" id="showextra">233 Show Stats234 </button>235 <div id="extraContent">236 <span class="derived-notice">237 All the metrics below are not provided by YouTube and are independently calculated metrics.238 </span>239 <br>240 <br>241 <div class="chartWrapper">242 <canvas height="200" id="chart0" width="400">243 </canvas>244 </div>245 <br>246 <br>247 <br>248 <span class="milestones" id="milestoneBox">249 <span class="odometer odometer-auto-theme" id="milestoneLeft">250 <div class="odometer-inside">251 <span class="odometer-digit">252 <span class="odometer-digit-spacer">253 8254 </span>255 <span class="odometer-digit-inner">256 <span class="odometer-ribbon">257 <span class="odometer-ribbon-inner">258 <span class="odometer-value">259 0260 </span>261 </span>262 </span>263 </span>264 </span>265 </div>266 </span>267 left from268 <span id="milestoneTarget">269 Loading...270 </span>271 !272 </span>273 <br>274 <br>275 <br>276 <table>277 <tbody>278 <tr>279 <td>280 Total Views:281 </td>282 <td>283 <span id="totalViews">284 Loading...285 </span>286 </td>287 </tr>288 <tr>289 <td>290 Total Videos:291 </td>292 <td>293 <span id="totalVideos">294 Loading...295 </span>296 </td>297 </tr>298 <tr>299 <td>300 Since:301 </td>302 <td>303 <span id="pubDate">304 Loading...305 </span>306 </td>307 </tr>308 </tbody>309 </table>310 <p id="vidsText">311 Last312 <input aria-label="Input box: Enter number of videos (1-25)" id="vids" placeholder="1-25" type="text" value="5">313 videos314 </p>315 <button class="extraToggle" id="updateCharts" onclick="updateCharts();">316 Update317 </button>318 <div class="chartWrapper">319 <canvas height="200" id="chart1" width="400">320 </canvas>321 <canvas height="200" id="chart2" width="400">322 </canvas>323 <canvas height="200" id="chart3" width="400">324 </canvas>325 </div>326 </div>327 <button class="extraToggle" id="hideextra">328 Hide Stats329 </button>330 </section>331 </div>332 </body>333</html>334