<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Control Your Player</title> <link rel="stylesheet" href="cyp.css" /> </head> <body> <cyp-app theme="dark" color="dodgerblue"> <header> <cyp-player> <span class="art"></span> <div class="info"> <span class="title"></span> <span class="subtitle"></span> <div class="timeline"> <span class="elapsed"></span> <x-range></x-range> <span class="duration"></span> </div> </div> <div class="controls"> <div class="playback"> <button class="prev" data-icon="rewind"></button> <button class="play" data-icon="play"></button> <button class="pause" data-icon="pause"></button> <button class="next" data-icon="fast-forward"></button> </div> <div class="volume"> <button class="mute" data-icon="volume-high"></button> <x-range></x-range> </div> </div> <div class="misc"> <button class="repeat" data-icon="repeat"></button> <button class="random" data-icon="shuffle"></button> </div> </cyp-player> </header> <main> <cyp-queue></cyp-queue> <cyp-playlists></cyp-playlists> <cyp-library></cyp-library> <cyp-yt></cyp-yt> <cyp-settings> <dl> <dt>Theme</dt> <dd> <select name="theme"> <option value="auto">Auto</option> <option value="dark">Dark</option> <option value="light">Light</option> </select> </dd> <dt>Color</dt> <dd> <label> <input type="radio" name="color" value="dodgerblue" /> Blue </label> <label> <input type="radio" name="color" value="darkorange" /> Orange </label> <label> <input type="radio" name="color" value="limegreen" /> Green </label> </dd> <dt>YouTube results</dt> <dd> <select name="yt-limit"> <option value="1">1</option> <option value="3">3</option> <option value="5">5</option> <option value="10">10</option> </select> </dd> </dl> </cyp-settings> </main> <footer> <cyp-menu> <button data-for="queue" data-icon="music"> <div> <span>Queue</span> <span class="queue-length"></span> </div> </button> <button data-for="playlists" data-icon="playlist-music"><span>Playlists</span></button> <button data-for="library" data-icon="library-music"><span>Library</span></button> <button data-for="yt" data-icon="download"><span>YouTube</span></button> <button data-for="settings" data-icon="settings"><span>Settings</span></button> </cyp-menu> </footer> </cyp-app> <script type="module" src="cyp.js"></script> </body> </html>