<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Youtube RemoteControl</title> <script src="js/element.js"></script> <script src="js/youtube.js"></script> <script src="js/video.js"></script> <script src="js/main.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="css/dialog.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/video.css"> </head> <body> <template id="video-template"> <div class="video-item"> <img class="video-image" src=""> <span class="video-close material-symbols-outlined">close</span> <div class="video-bottom"> <p class="video-title"></p> <div class="video-progress"> <div class="primary"></div> <div class="secondary"></div> </div> </div> </div> </template> <dialog id="display-select-dialog"> <div class="header"> <h1>Select Active Display</h1> <span onClick="onCloseSelectDisplayDialogClicked()" class="close material-symbols-outlined">close</span> </div> <div class="body"> <form id="display-select-dialog-form"></form> </div> </dialog> <dialog id="audio-sink-select-dialog"> <div class="header"> <h1>Select Active Audio Sink</h1> <span onClick="onCloseSelectAudioSinkDialogClicked()" class="close material-symbols-outlined">close</span> </div> <div class="body"> <form id="audio-sink-select-dialog-form"></form> </div> </dialog> <dialog id="open-new-video-dialog"> <div class="header"> <h1>Open New Video</h1> <span onClick="onCloseOpenNewVideoDialogClicked()" class="close material-symbols-outlined">close</span> </div> <div class="body"> <form id="open-new-video-dialog-form"> <input name="link" id="open-new-video-dialog-link" type="url" placeholder="URL"></input> <button onClick="onOpenVideoInBackgroundButtonClicked()" type="button">Open video in background</button> <button onClick="onOpenVideoButtonClicked()" type="button">Open video</button> </form> </div> </dialog> <dialog id="close-video-dialog"> <div class="header"> <h1>Close Video</h1> <span onClick="onCloseCloseVideoDialogClicked()" class="close material-symbols-outlined">close</span> </div> <div class="body"> <form id="close-video-dialog-form"> <p>Do you want to close the following video?</p> <p id="close-video-dialog-title"></p> <button onClick="onCloseVideoButtonClicked()" type="button">Close</button> <button onClick="onCancelCloseVideoButtonClicked()" type="button">Cancel</button> </form> </div> </dialog> <header> <span onClick="onShowSelectDisplayDialogClicked()" class="material-symbols-outlined">tv_displays</span> <span onClick="onShowSelectAudioSinkDialogClicked()" class="material-symbols-outlined">speaker_group</span> <span onClick="onShowOpenNewVideoDialogClicked()" class="material-symbols-outlined">open_in_new</span> </header> <div id="video-container"></div> <footer> <p id="current-timestamp"></p> <input type="range" min="0" max="100" value="0" class="slider" id="seekbar"> <p id="video-length"></p> <button id="replay" type="button"><span class="material-symbols-outlined">replay_10</span></button> <button id="play-pause" type="button"><span class="material-symbols-outlined">play_circle</span></button> <button id="forward" type="button"><span class="material-symbols-outlined">forward_10</span></button> <input type="range" min="0" max="100" value="0" step="5" class="slider" id="volume-bar"> </footer> </body> </html>