index.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="theme-color" content="#ffffff">
  5. <title>Test player</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" type="text/css" href="/player.css">
  8. </head>
  9. <body>
  10. <audio id="radio" controls></audio>
  11. <div id="player">
  12. <div id="contents" hidden>
  13. <div id="menu" class="tags">
  14. <input type="radio" name="tab-selector" id="tab-other-radios" checked/>
  15. <label for="tab-other-radios"> Altre Radio</label>
  16. <input type="radio" name="tab-selector" id="tab-programmi"/>
  17. <label for="tab-programmi"> Programmi</label>
  18. <input type="radio" name="tab-selector" id="tab-playlist"/>
  19. <label for="tab-playlist"> Playlist</label>
  20. </div>
  21. <div class="tabs">
  22. <div id="other-radios" class="tags">
  23. </div>
  24. <div id="programmi" class="hidden">
  25. <div class="show-list">
  26. <img id="prev-show" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png" />
  27. <div id="programmi-lista"></div>
  28. <img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" />
  29. </div>
  30. <div class="show-content">
  31. <img id="prev-show-card" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/>
  32. <div id="programmi-content">
  33. <template id="show-card-template">
  34. <div class="show-card">
  35. <span class="title"></span>
  36. <div class="small-tags"></div><br>
  37. <div class="description"></div>
  38. <div class="controls">
  39. <img src="/icons/plus.png" class="add-to-playlist">
  40. <img src="/icons/playIcon.svg" class="play-pause">
  41. </div>
  42. </div>
  43. </template>
  44. </div>
  45. <img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/>
  46. </div>
  47. </div>
  48. <div id="playlist" class="hidden">
  49. Qui ci va la playlist, ancora non puoi riprodurla, però puoi scaricarle l'<span onclick="downloadPlaylist"><b>m3u 📥</b></span>
  50. </div>
  51. </div>
  52. </div>
  53. <div id="controls" class="controls">
  54. <div class="controlBlock controlLeft">
  55. <div class="info-content">
  56. <span id="radio-name">Radio Spore</span>
  57. <br/>
  58. <span id="program-name">Un programma a caso</span>
  59. </div>
  60. </div>
  61. <div class="controlBlock controlCenter">
  62. <span id="prev" class="prev-step control">
  63. <img alt="Indietro di 15 secondi" src="/icons/15_sec_prima.svg">
  64. </span>
  65. <span id="play" class="play-pause control" label="Premi per iniziare la riproduzione del player">
  66. <img alt="Ascolta la diretta" src="/icons/playIcon.svg">
  67. </span>
  68. <span id="next" class="prev-step control">
  69. <img alt="Avanti di 15 secondi" src="/icons/15_sec_dopo.svg">
  70. </span>
  71. </div>
  72. <div class="controlBlock controlRight">
  73. <div>
  74. <span class="is-live live">· LIVE</span>
  75. <span class="back-to-live live hidden">TORNA AL LIVE</span>
  76. <img id="volume-on" src="/icons/volume.svg" />
  77. <img id="volume-off" src="/icons/volume_off.svg" class="hidden"/>
  78. <input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
  79. <img id="contents-button" class="arrow-up" alt="Apri il player" src="/icons/ico-arrow.png" />
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. <script src="/player.js"></script>
  85. </body>
  86. </html>