| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <!doctype html>
- <html lang="en-us">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <script type="text/javascript" src="AtomicLoader.js"></script>
- <title>Atomic Web Player - Preview</title>
- <script>window.addEventListener("keydown", function(e) {
- // Disable stock behavior, which was causing scroll errors
- // space and arrow keys
- if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
- e.preventDefault();
- }
- }, false);</script>
- <style>
- /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
- canvas.atomic { border: 0px none; }
- /* spinner as this keeps going even when page setInterval does not*/
- .spinner {
- height: 30px;
- width: 30px;
- margin: 0;
- margin-top: 20px;
- margin-left: 20px;
- display: inline-block;
- vertical-align: top;
- -webkit-animation: rotation .8s linear infinite;
- -moz-animation: rotation .8s linear infinite;
- -o-animation: rotation .8s linear infinite;
- animation: rotation 0.8s linear infinite;
- border-left: 5px solid rgb(235, 235, 235);
- border-right: 5px solid rgb(235, 235, 235);
- border-bottom: 5px solid rgb(235, 235, 235);
- border-top: 5px solid rgb(120, 120, 120);
- border-radius: 100%;
- background-color: rgb(189, 215, 46);
- }
- @-webkit-keyframes rotation {
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
- }
- @-moz-keyframes rotation {
- from {-moz-transform: rotate(0deg);}
- to {-moz-transform: rotate(360deg);}
- }
- @-o-keyframes rotation {
- from {-o-transform: rotate(0deg);}
- to {-o-transform: rotate(360deg);}
- }
- @keyframes rotation {
- from {transform: rotate(0deg);}
- to {transform: rotate(360deg);}
- }
- </style>
- </head>
- <body>
- <div id="atomic_player_canvas_wrapper">
- <canvas class="atomic" id="atomic_player_canvas" oncontextmenu="event.preventDefault()"></canvas>
- </div>
- <div class="spinner" id='atomic_spinner'></div>
- <script type="text/javascript">
- (function() {
- var playerCanvas = document.getElementById('atomic_player_canvas');
- var spinner = document.getElementById('atomic_spinner');
- var width = $( window ).width();
- var height = $( window ).height();
- new AtomicLoader(playerCanvas, spinner, width, height);
- }) ();
- </script>
- <!---->
- <!--
- <!-- <textarea id="output" rows="8" cols="80"></textarea> -->
- <script async type="text/javascript" src="AtomicResources.js"></script>
- <script async type="text/javascript" src="AtomicPlayer.js"></script>
- </body>
- </html>
|