index.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!doctype html>
  2. <html class="no-js" lang="">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="description" content="">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta property="og:title" content="">
  9. <meta property="og:type" content="">
  10. <meta property="og:url" content="">
  11. <meta property="og:image" content="">
  12. <link rel="stylesheet" href="css/normalize.css">
  13. <link rel="stylesheet" href="css/main.css">
  14. <link rel="stylesheet" href="css/fontawesome.css">
  15. <link rel="stylesheet" href="css/solid.css">
  16. <link rel="stylesheet" href="css/bootstrap.css">
  17. <link rel="stylesheet" href="css/main.css">
  18. <meta name="theme-color" content="#fafafa">
  19. </head>
  20. <body>
  21. <div class="container">
  22. <div class="row">
  23. <div class="col-xl-6 col-sm-12">
  24. <div class="row" >
  25. <form hidden id="addVideoForm" class="form-inline my-4">
  26. <div class="form-group">
  27. <label for="addVideo">Add Video</label>
  28. <input id="addVideo" class="form-control ml-2"/>
  29. </div>
  30. </form>
  31. <form id="searchVideoForm" class="form-inline my-4">
  32. <div class="form-group">
  33. <label for="searchVideo">Search</label>
  34. <input id="searchVideo" class="form-control ml-2"/>
  35. </div>
  36. </form>
  37. </div>
  38. <div class="row">
  39. <div id="searchResultList" class="list-group col">
  40. <div id="searchResultTemplate" class="searchResult list-group-item list-group-item-action" hidden>
  41. <div class="row">
  42. <div class="searchResultThumbnail col-3">
  43. </div>
  44. <div class="col-9 searchResultTextContainer">
  45. <span class="h4 searchResultTitle">She</span><br/>
  46. <span class="searchResultChannel pr-3">Dodie - Topic</span>
  47. <span class="searchResultDescription">The most ethereal song ever produced. 100/10 best boi song ever</span>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="col-xl-6 my-4 col-sm-12">
  55. <span class="row"><button id="leader-button"
  56. class="btn btn-outline-secondary disabled">No connection</button></span>
  57. <div id="player" class="row py-4"></div>
  58. <div id="videoList" class="list-group">
  59. <div id="videoListCardTemplate" class="videoListCard list-group-item" hidden>
  60. <button class="videoListCardMoveUp btn btn-outline-secondary"><i class="fa fa-caret-up"></i>
  61. </button>
  62. <button class="videoListCardMoveDown btn btn-outline-secondary"><i class="fa fa-caret-down"></i>
  63. </button>
  64. <span class="templateText"></span>
  65. <button class="videoListCardDelete btn btn-outline-danger"><i class="fa fa-trash-alt"></i></button>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <script src="js/main.js" type="module"></script>
  72. </body>
  73. </html>