index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 7 <meta content="A minimalistic, elegant video player built to enjoy a seamless shuffle stream of Daoko MVs" 8 name="description"> 9 <meta content="#000000" name="theme-color"> 10 <meta content="yes" name="apple-mobile-web-app-capable"> 11 <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"> 12 <meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"> 13 <meta content="no-cache" http-equiv="Pragma"> 14 <meta content="0" http-equiv="Expires"> 15 <title>DaokoTube</title> 16 <link href="data:image/svg+xml;utf8,%3Csvg%20width%3D%2732px%27%20height%3D%2732px%27%20viewBox%3D%270%200%2032%2032%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20fill%3D%27%231E88E5%27%20d%3D%27M16%2028.261c0%200-14-7.926-14-17.413%200-5.016%203.836-6.609%207.043-6.609%202.282%200%204.368%201.076%206.957%203.739%202.589-2.663%204.675-3.739%206.957-3.739%203.207%200%207.043%201.593%207.043%206.609%200%209.487-14%2017.413-14%2017.413z%27/%3E%3C/svg%3E" rel="icon" 17 type="image/svg+xml"/> 18 <link href="css/utilities.css" rel="stylesheet"> 19 <link href="css/index.css" rel="stylesheet"> 20 <link href="css/custom-cursor.css" rel="stylesheet"> 21 </head> 22 23 <body> 24 <noscript> 25 <div class="noscript-message"> 26 <h2>👾 JavaScript Required 👾</h2> 27 <p>👾 DaokoTube requires JavaScript to be enabled in your browser. 👾</p> 28 <p>👾 Please enable JavaScript and reload the page to continue. 👾</p> 29 </div> 30 </noscript> 31 <div class="container"> 32 <button type="button" class="menu-toggle left icon-hover-effect" 33 id="left-menu-toggle"> 34 <img alt="menu" class="menu-icon-img icon-base-32" height="48" src="https://img.icons8.com/neon/128/menu.png" 35 width="48"/> 36 </button> 37 <nav class="sidebar left unified-control-base" 38 id="left-menu" aria-label="Main navigation"> 39 <div class="sidebar-content"> 40 <div class="menu-header"> 41 <a class="logo-link icon-hover-effect" 42 href="https://daoko.jp" 43 rel="noopener noreferrer" 44 target="_blank"> 45 <div class="logo-container"> 46 <img alt="D" class="logo-icon icon-base-24" src="https://img.icons8.com/neon/128/play.png" height="64" 47 width="64"/> 48 <img alt="A" class="logo-icon logo-icon-point-up icon-base-24" src="https://img.icons8.com/neon/128/play.png" height="64" 49 width="64"/> 50 <img alt="O" class="logo-icon icon-base-24" src="https://img.icons8.com/neon/128/cd.png" height="64" 51 width="64"/> 52 <img alt="K" class="logo-icon logo-icon-flip-horizontal icon-base-24" src="https://img.icons8.com/neon/128/play.png" height="64" 53 width="64"/> 54 <img alt="O" class="logo-icon icon-base-24" src="https://img.icons8.com/neon/128/cd.png" height="64" 55 width="64"/> 56 <img alt="T" class="logo-icon icon-base-24" src="https://img.icons8.com/neon/128/bass-clef.png" height="64" 57 width="64"/> 58 <img alt="U" class="logo-icon logo-icon-flip-vertical icon-base-24" src="https://img.icons8.com/neon/128/u-turn.png" height="64" 59 width="64"/> 60 <img alt="B" class="logo-icon icon-base-24" src="https://img.icons8.com/neon/128/cancer.png" height="64" 61 width="64"/> 62 <img alt="E" class="logo-icon icon-base-24" src="https://img.icons8.com/neon/128/water-element.png" height="64" 63 width="64"/> 64 </div> 65 </a> 66 </div> 67 <button type="button" class="stats-button primary-border primary-shadow-hover" id="livestream-toggle"> 68 <img alt="rfid-signal" class="stats-icon-left icon-base-24" src="https://img.icons8.com/neon/96/rfid-signal.png" 69 height="48" width="48"/> 70 <span class="stats-text">Livestream Archives</span> 71 <img alt="retro-tv" class="stats-icon-right icon-base-24" src="https://img.icons8.com/neon/96/retro-tv.png" height="48" 72 width="48"/> 73 </button> 74 <button type="button" class="stats-button primary-border primary-shadow-hover" id="stats-toggle"> 75 <img alt="drag-list-down" class="stats-icon-left icon-base-24" src="https://img.icons8.com/neon/96/drag-list-down.png" 76 height="48" width="48"/> 77 <span class="stats-text">Stats for Nerds</span> 78 <img alt="combo-chart" class="stats-icon-right icon-base-24" src="https://img.icons8.com/neon/96/combo-chart.png" height="48" 79 width="48"/> 80 </button> 81 <div class="section-content stats-section hidden" id="stats-content"> 82 <p>Loading stats...</p> 83 </div> 84 <div class="menu-footer"> 85 <div class="social-links"> 86 <a class="social-link github-link icon-hover-effect" 87 href="https://github.com/dtub/DaokoTube" 88 rel="noopener noreferrer" 89 target="_blank"> 90 <img alt="github" class="social-icon-img icon-base-32" src="https://img.icons8.com/neon/128/github.png" height="64" 91 width="64"/> 92 </a> 93 <a class="social-link instagram-link icon-hover-effect" 94 href="https://www.instagram.com/daoko_official/" 95 rel="noopener noreferrer" 96 target="_blank"> 97 <img alt="instagram-new" class="social-icon-img icon-base-32" src="https://img.icons8.com/neon/128/instagram-new.png" 98 height="64" width="64"/> 99 </a> 100 <a class="social-link instagram-alt-link icon-hover-effect" 101 href="https://www.instagram.com/daoko_meme/" 102 rel="noopener noreferrer" 103 target="_blank"> 104 <img alt="instagram" class="social-icon-img icon-base-32" src="https://img.icons8.com/neon/128/instagram.png" 105 height="64" width="64"/> 106 </a> 107 <a class="social-link photoshop-link icon-hover-effect" 108 href="https://www.instagram.com/vi7._.o/" 109 rel="noopener noreferrer" 110 target="_blank"> 111 <img alt="photoshop" class="social-icon-img icon-base-32" src="https://img.icons8.com/neon/128/adobe-photoshop.png" 112 height="64" width="64"/> 113 </a> 114 </div> 115 116 <!-- Language selection controls --> 117 <div class="language-selector" id="language-selector"> 118 <button type="button" aria-label="Japanese" class="lang-btn primary-border primary-shadow-hover" data-lang="ja"> 119 <img alt="sakura" class="lang-icon-img icon-base-24" src="https://img.icons8.com/neon/96/sakura.png" height="48" 120 width="48"/> 121 <span>日本語</span> 122 </button> 123 <button type="button" aria-label="Chinese" class="lang-btn primary-border primary-shadow-hover" data-lang="zh"> 124 <img alt="lantern" class="lang-icon-img icon-base-24" src="https://img.icons8.com/neon/96/lantern.png" height="48" 125 width="48"/> 126 <span>ä¸æ–‡</span> 127 </button> 128 </div> 129 </div> 130 </div> 131 </nav> 132 133 <button type="button" class="menu-toggle right icon-hover-effect" 134 id="right-menu-toggle"> 135 <img alt="playlist" class="playlist-icon-img icon-base-32" height="48" src="https://img.icons8.com/neon/128/video-playlist.png" 136 width="48"/> 137 <img class="playlist-corner-icon" id="playlist-corner-icon" alt="notification" src="https://img.icons8.com/neon/24/--tinder.png" /> 138 </button> 139 <nav class="sidebar right unified-control-base" 140 id="right-menu" aria-label="Playlist navigation"> 141 <div class="sidebar-content"> 142 <div class="playlist-search-row"> 143 <button type="button" class="menu-button small tooltip primary-border primary-shadow-hover" 144 id="playlist-reshuffle-button" title="Reshuffle playlist"><img alt="shuffle" class="shuffle-icon-img icon-base-24" 145 src="https://img.icons8.com/neon/96/shuffle.png" 146 height="24" 147 width="24"/> 148 </button> 149 <div class="playlist-search-container"> 150 <div class="search-icon-container"> 151 <img alt="search" class="search-icon-img icon-base-24" src="https://img.icons8.com/neon/96/search.png" height="48" 152 width="48"/> 153 <input class="playlist-search primary-border primary-shadow-hover" 154 id="playlist-search" 155 placeholder="Search videos..." type="text"> 156 </div> 157 <button type="button" class="playlist-search-clear" id="playlist-search-clear">✕ 158 </button> 159 </div> 160 </div> 161 <ul id="playlist-items"></ul> 162 </div> 163 </nav> 164 165 <div class="video-wrapper"> 166 <video controlslist="nodownload noplaybackrate" 167 disablepictureinpicture 168 id="video-player" 169 muted 170 playsinline 171 poster="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMDAwIi8+PC9zdmc+" 172 preload="none"></video> 173 <div id="interaction-zones"> 174 <div class="zone left-zone"></div> 175 <div class="zone center-zone"></div> 176 <div class="zone right-zone"></div> 177 </div> 178 179 <div class="tap-controls-overlay" id="tap-controls-overlay"> 180 <div class="tap-control tap-left"></div> 181 <div class="tap-control tap-center"></div> 182 <div class="tap-control tap-right"></div> 183 </div> 184 185 <div id="startup-animation"> 186 <svg id="startup-logo-svg" 187 viewBox="0 0 100 35" 188 xmlns="http://www.w3.org/2000/svg"> 189 <g id="logo-g-play"> 190 <path d="M52.83 2.35l-17.5 30.31h35L52.83 2.35z"/> 191 </g> 192 <g id="logo-g-left"> 193 <path d="M15.15 17.5L0 0v35l15.15-17.5z"/> 194 </g> 195 <g id="logo-g-right"> 196 <path d="M84.85 17.5L100 35V0l-15.15 17.5z"/> 197 </g> 198 <g id="logo-g-center-dot"> 199 <circle cx="35" 200 cy="17.5" 201 r="7.78"/> 202 </g> 203 <g id="logo-g-right-dot"> 204 <circle cx="67.5" 205 cy="17.5" 206 r="7.78"/> 207 </g> 208 </svg> 209 </div> 210 211 <div class="unified-control-round" id="spinner"></div> 212 213 <div class="message-overlay unified-control-base unified-control-box" id="message-overlay"></div> 214 215 <div class="progress-container unified-control-base" id="progress-container"> 216 <div class="progress-bar"> 217 <div class="progress-line"></div> 218 </div> 219 </div> 220 221 <div class="animation-icon" 222 id="play-pause-animation"> 223 <div class="play-container"> 224 <img alt="play" class="play-icon-img" src="https://img.icons8.com/neon/256/play.png" height="128" 225 width="128"/> 226 </div> 227 <div class="pause-container"> 228 <img alt="pause" class="pause-icon-img" src="https://img.icons8.com/neon/256/pause.png" height="128" 229 width="128"/> 230 </div> 231 </div> 232 <div class="animation-icon fast-seek-animation" 233 id="fast-seek-animation"> 234 <div class="seek-left-container"> 235 <img alt="rewind" class="rewind-icon-img" src="https://img.icons8.com/neon/256/rewind.png" height="128" 236 width="128"/> 237 </div> 238 <div class="seek-right-container"> 239 <img alt="fast-forward" class="forward-icon-img" src="https://img.icons8.com/neon/256/fast-forward.png" 240 height="128" width="128"/> 241 </div> 242 </div> 243 <div class="animation-icon switch-animation" 244 id="switch-animation"> 245 <div class="switch-left-container"> 246 <img alt="back" class="back-icon-img" src="https://img.icons8.com/neon/256/back.png" height="128" 247 width="128"/> 248 </div> 249 <div class="switch-right-container"> 250 <img alt="forward" class="forward-arrow-img" src="https://img.icons8.com/neon/256/forward.png" height="128" 251 width="128"/> 252 </div> 253 </div> 254 <div class="animation-icon volume-animation" 255 id="volume-animation"> 256 <div class="volume-mute-container"> 257 <img alt="mute" class="volume-icon-img" src="https://img.icons8.com/neon/256/mute.png" height="128" 258 width="128"/> 259 </div> 260 <div class="volume-low-container"> 261 <img alt="low-volume" class="volume-icon-img" src="https://img.icons8.com/neon/256/low-volume.png" height="128" 262 width="128"/> 263 </div> 264 <div class="volume-medium-container"> 265 <img alt="medium-volume" class="volume-icon-img" src="https://img.icons8.com/neon/256/medium-volume.png" 266 height="128" width="128"/> 267 </div> 268 <div class="volume-high-container"> 269 <img alt="high-volume" class="volume-icon-img" src="https://img.icons8.com/neon/256/high-volume.png" 270 height="128" width="128"/> 271 </div> 272 <div class="volume-max-container"> 273 <img alt="speaker" class="volume-icon-img" src="https://img.icons8.com/neon/256/speaker.png" height="128" 274 width="128"/> 275 </div> 276 </div> 277 <!-- Fullscreen animation element removed - now using showIconAnimation directly --> 278 <!-- videofit-animation element removed - now using showIconAnimation directly --> 279 </div> 280 281 282 283 </div> 284 285 <!-- Main application script --> 286 <script crossorigin="anonymous" src="app.js" type="module"></script> 287 288 </body> 289 290 </html>