index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Media player demo</title>
  5. <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  6. <link rel="stylesheet" type="text/css" href="style.css">
  7. <script src="tracks.js"></script>
  8. <script src="main.js"></script>
  9. </head>
  10. <body>
  11. <div class="player">
  12. <div class="details">
  13. <div class="display-text"></div>
  14. <div class="now-playing">PLAYING x OF y</div>
  15. <div class="track-art"></div>
  16. <div class="track-name">Track Name</div>
  17. <div class="track-artist">Track Artist</div>
  18. </div>
  19. <div class="buttons">
  20. <div class="prev-track" >
  21. <i class="fa fa-step-backward fa-2x"></i>
  22. </div>
  23. <div class="playpause-track">
  24. <i class="fa fa-play-circle fa-5x"></i>
  25. </div>
  26. <div class="next-track" >
  27. <i class="fa fa-step-forward fa-2x"></i>
  28. </div>
  29. </div>
  30. <div class="slider_container">
  31. <div class="current-time">00:00</div>
  32. <input type="range" min="1" max="100"
  33. value="0" class="seek_slider" >
  34. <div class="total-duration">00:00</div>
  35. </div>
  36. <div class="slider_container">
  37. <i class="fa fa-volume-down"></i>
  38. <input type="range" min="1" max="100"
  39. value="99" class="volume_slider">
  40. <i class="fa fa-volume-up"></i>
  41. </div>
  42. </div>
  43. <hr>
  44. <a href="main.pas">Program sources</a> &nbsp; <a
  45. href="https://www.bensound.com/royalty-free-music/">Royalty-free music from Bensound</a>
  46. <script>
  47. window.addEventListener("load",rtl.run)
  48. </script>
  49. </body>
  50. </html>