AtomicPlayer.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!doctype html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  7. <script type="text/javascript" src="AtomicLoader.js"></script>
  8. <title>Atomic Web Player - Preview</title>
  9. <script>window.addEventListener("keydown", function(e) {
  10. // Disable stock behavior, which was causing scroll errors
  11. // space and arrow keys
  12. if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
  13. e.preventDefault();
  14. }
  15. }, false);</script>
  16. <style>
  17. /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
  18. canvas.atomic { border: 0px none; }
  19. /* spinner as this keeps going even when page setInterval does not*/
  20. .spinner {
  21. height: 30px;
  22. width: 30px;
  23. margin: 0;
  24. margin-top: 20px;
  25. margin-left: 20px;
  26. display: inline-block;
  27. vertical-align: top;
  28. -webkit-animation: rotation .8s linear infinite;
  29. -moz-animation: rotation .8s linear infinite;
  30. -o-animation: rotation .8s linear infinite;
  31. animation: rotation 0.8s linear infinite;
  32. border-left: 5px solid rgb(235, 235, 235);
  33. border-right: 5px solid rgb(235, 235, 235);
  34. border-bottom: 5px solid rgb(235, 235, 235);
  35. border-top: 5px solid rgb(120, 120, 120);
  36. border-radius: 100%;
  37. background-color: rgb(189, 215, 46);
  38. }
  39. @-webkit-keyframes rotation {
  40. from {-webkit-transform: rotate(0deg);}
  41. to {-webkit-transform: rotate(360deg);}
  42. }
  43. @-moz-keyframes rotation {
  44. from {-moz-transform: rotate(0deg);}
  45. to {-moz-transform: rotate(360deg);}
  46. }
  47. @-o-keyframes rotation {
  48. from {-o-transform: rotate(0deg);}
  49. to {-o-transform: rotate(360deg);}
  50. }
  51. @keyframes rotation {
  52. from {transform: rotate(0deg);}
  53. to {transform: rotate(360deg);}
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div id="atomic_player_canvas_wrapper">
  59. <canvas class="atomic" id="atomic_player_canvas" oncontextmenu="event.preventDefault()"></canvas>
  60. </div>
  61. <div class="spinner" id='atomic_spinner'></div>
  62. <script type="text/javascript">
  63. (function() {
  64. var playerCanvas = document.getElementById('atomic_player_canvas');
  65. var spinner = document.getElementById('atomic_spinner');
  66. var width = $( window ).width();
  67. var height = $( window ).height();
  68. new AtomicLoader(playerCanvas, spinner, width, height);
  69. }) ();
  70. </script>
  71. <!---->
  72. <!--
  73. <!-- <textarea id="output" rows="8" cols="80"></textarea> -->
  74. <script async type="text/javascript" src="AtomicResources.js"></script>
  75. <script async type="text/javascript" src="AtomicPlayer.js"></script>
  76. </body>
  77. </html>