Guest User

Untitled

a guest
Jul 2nd, 2020
267
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Test</title>
  5. <meta charset="utf-8">
  6. <link rel='manifest' href='/manifest.json'>
  7. <link rel="stylesheet" src="style.css">
  8. <link rel="icon" type="image/png" href="icon1.png" />
  9. <link rel='manifest' href='/manifest.json'>
  10. <meta name="theme-color" content="#ffffff">
  11. <meta name="apple-mobile-web-app-status-bar" content="#ffffff" >
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13. <!--mobile icons-->
  14. <link rel='shortcut icon' type='image/x-icon' href="images/icon.png" />
  15. <link rel="apple-touch-icon" sizes="74x74" href="images/icon-74.png" />
  16. <link rel="apple-touch-icon" sizes="96x96" href="images/icon-96.png" />
  17. <link rel="apple-touch-icon" sizes="144x144" href="images/icon-144.png" />
  18. <link rel="apple-touch-icon" sizes="384x384" href="images/icon-384.png" />
  19. <link rel="apple-touch-icon" sizes="512x512" href="images/icon-512.png" />
  20. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Oxygen:400,700" rel="stylesheet">
  21.  
  22. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
  23. <link rel="stylesheet" href="css/animate.css">
  24. <link rel="stylesheet" href="css/owl.carousel.min.css">
  25. <link rel="stylesheet" href="css/jquery.fancybox.min.css">
  26.  
  27. <link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
  28. <link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
  29. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  30. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  31. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  32. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  33. <!-- Theme Style -->
  34. <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  35. <script src="http://vjs.zencdn.net/4.12/video.js"></script>
  36. <link rel="stylesheet" href="css/style.css">
  37.  
  38.  
  39.  
  40. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  41. <link rel="stylesheet" href="../../extensions/Editor/css/editor.dataTables.min.css">
  42. <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
  43. <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
  44. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  45. <link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
  46. <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
  47.  
  48. <script type="text/javascript" src="DataTables/datatables.min.js"></script>
  49. <style>
  50. a.buttons-collection {
  51. margin-left: 1em;
  52. }
  53.  
  54. </style>
  55.  
  56.  
  57. </head>
  58. <body>
  59.  
  60.  
  61.  
  62.  
  63. <section>
  64. <div style="margin: 20px;">
  65. <table id="example" class="display" style="width:100%">
  66. <thead>
  67.  
  68. <tr>
  69. <th>S No</th>
  70. <th>Title</th>
  71. <th>Listen</th>
  72. <th>Download</th>
  73.  
  74. </tr>
  75. </thead>
  76. <tbody>
  77. <tr>
  78. <td></td>
  79. <td >Mp31</td>
  80.  
  81. <td ><a href="media/mp3/test1.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal"
  82. data-value="media/mp3/test1.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  83. <path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
  84. </svg> </td>
  85. <td> </td>
  86. </tr>
  87.  
  88.  
  89. <tr>
  90. <td></td>
  91. <td >Mp32</td>
  92.  
  93. <td ><a href="media/mp3/test2.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal" onClick=""
  94. data-value="media/mp3/test2.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  95. <path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
  96. </svg> </td>
  97. <td></td>
  98. </tr>
  99.  
  100.  
  101. </tbody>
  102. <tfoot>
  103. <tr>
  104. <th>S No</th>
  105. <th>Title</th>
  106. <th>Listen</th>
  107. <th>Download</th>
  108.  
  109. </tr>
  110. </tfoot>
  111. </table>
  112. </div>
  113. </section>
  114.  
  115.  
  116. <!--MP3 modal-->
  117. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
  118. <!-- Scrollable modal -->
  119. <div class="modal-dialog modal-dialog-centered modal-xl">
  120. <div class="modal-content">
  121. <div class="modal-header">
  122. <h4 class="modal-title" id="exampleModalLabel">MP3</h4>
  123. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  124. <span aria-hidden="true">&times;</span>
  125. </button>
  126. </div>
  127. <div class="modal-body" >
  128. <div class="row" style="padding: 10px;">
  129. <button type="button" class="btn btn-primary"><audio controls preload="metadata" style=" width:450px;">
  130. <source src="media/mp3/serm.mp3" type="audio/mpeg">
  131. Your browser does not support the audio element.
  132. </audio></button>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138.  
  139.  
  140.  
  141. <!-- loader -->
  142. <div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>
  143.  
  144.  
  145.  
  146. <script src="js/jquery-3.2.1.min.js"></script>
  147. <script src="js/popper.min.js"></script>
  148. <script src="js/bootstrap.min.js"></script>
  149. <script src="js/owl.carousel.min.js"></script>
  150. <script src="js/jquery.waypoints.min.js"></script>
  151. <script src="js/jquery.fancybox.min.js"></script>
  152. <script src="js/main.js"></script>
  153.  
  154. <script src="js/main.js"></script>
  155.  
  156.  
  157.  
  158. <script src="js/app.js"></script>
  159.  
  160. <script>$(document).ready(function() {
  161. var t = $('#example').DataTable( {
  162. "columnDefs": [ {
  163. "searchable": false,
  164. "orderable": false,
  165. "targets": 0
  166. } ],
  167. "order": [[ 1, 'asc' ]],
  168.  
  169. dom: 'Bfrtip',
  170. buttons: [
  171. 'copyHtml5',
  172. 'excelHtml5',
  173. 'csvHtml5',
  174. 'pdfHtml5'
  175. ],
  176. responsive: true,
  177.  
  178.  
  179. } );
  180.  
  181. t.on( 'order.dt search.dt', function () {
  182. t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
  183. cell.innerHTML = i+1;
  184. } );
  185. } ).draw();
  186. } );</script>
  187. <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  188. <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  189.  
  190. <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
  191. <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  192. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  193. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  194. <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
  195.  
  196. </body>
  197. </html>
RAW Paste Data Copied