video.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link href="../style.css" rel="stylesheet" />
  7. <title>▶️SkibidiHub - Video</title>
  8. </head>
  9. <body>
  10. <div class="navbar">
  11. <div class="navbar-spacer"></div>
  12. <a href="/" class="navbar-img-anchor"><img class="navbar-img" src="../assets/logo.png" /></a>
  13. <div class="navbar-spacer"></div>
  14. <div class="searchbar-container">
  15. <form id="searchbar-form" action="/search">
  16. <input type="text" name="query" class="searchbar" placeholder="search">
  17. </form>
  18. </div>
  19. <div class="navbar-buttons">
  20. <a class="anchor" href="/login">
  21. <button class="login" id="login-button">Login</button>
  22. </a>
  23. <a href="/upload" class="anchor">
  24. <button id="upload-button" class="login disabled">Upload</button>
  25. </a>
  26. <a class="anchor" id="account-button-anchor">
  27. <button id="account-button" class="login disabled">My Account</button>
  28. </a>
  29. <button id="logout-button" onclick="Cookies.remove('user'); Cookies.remove('token'); window.location.reload()" class="login disabled">Logout</button>
  30. <div class="navbar-spacer"></div>
  31. </div>
  32. </div>
  33. <div class="video-container">
  34. <video id="video" class="video-video" autoplay controls></video>
  35. <img src="./../assets/loading.gif" width="300" id="loading">
  36. </div>
  37. <div class="video-info">
  38. <h1 id="video-title">LOADING</h1>
  39. <div class="video-actions">
  40. <div class="span">
  41. <a id="video-author-anchor" class="video-author"><h2 id="video-author" class="video-author">LOADING</h2></a>
  42. <img src="/assets/verified.png" width="30" id="verified" class="disabled">
  43. </div>
  44. <div class="navbar-spacer"></div>
  45. <button
  46. class="like"
  47. onclick="like(window.location.pathname.split('/')[2])"
  48. >
  49. <img src="../assets/like.jpg" width="50" />
  50. <p id="video-likes">LOADING</p>
  51. </button>
  52. <button
  53. class="dislike"
  54. onclick="dislike(window.location.pathname.split('/')[2])"
  55. >
  56. <img src="../assets/dislike.jpg" width="50" />
  57. <p id="video-dislikes">LOADING</p>
  58. </button>
  59. <button class="subscribe" id="subscribe">
  60. Subscribe
  61. </button>
  62. </div>
  63. </div>
  64. <div class="video-description">
  65. <h3 id="author-info"></h3>
  66. <h2 id="video-date">LOADING</h2>
  67. <p id="video-description">LOADING</p>
  68. </div>
  69. <div id="comments" class="comments">
  70. <h1>Comments</h1>
  71. <hr />
  72. <form id="comment-form">
  73. <label for="text">Comment...</label> <br />
  74. <textarea
  75. name="text"
  76. rows="5"
  77. cols="50"
  78. placeholder="Comment here what you think about the video!"
  79. id="comment-textarea"
  80. class="comment-textarea"
  81. >
  82. </textarea>
  83. <br />
  84. <input type="submit" value="comment!" />
  85. </form>
  86. <hr />
  87. </div>
  88. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  89. <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js "></script>
  90. <script src="./../utils.js"></script>
  91. <script src="./../video.js"></script>
  92. </body>
  93. </html>