diff --git a/compare.css b/compare.css index c28d073..5c5d5e7 100644 --- a/compare.css +++ b/compare.css @@ -1,9 +1,38 @@ +body { + background: #fff; + font-family: sans-serif; + color: #000; + width: 1108px; + margin: 0 auto; +} + +.container { + display: inline-block; + vertical-align: top; +} + textarea { - width: 450px; + width: 482px; + padding: 6px; + -moz-box-sizing: border-box; + box-sizing: border-box; height: 200px; -} - -object { display: block; + margin: 16px auto; + border: 1px solid #aaa; + box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3); } +#flash-scratch { + text-align: center; + visibility: hidden; + display: block; + margin: 48px 0 62px; +} + +#flash-scratch p { + color: #aaa; + font-size: 22px; + margin-top: 14px; + line-height: 28px; +} diff --git a/compare.html b/compare.html index 54961e8..5bf9a2d 100644 --- a/compare.html +++ b/compare.html @@ -1,134 +1,134 @@ -<? -header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 -header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past -?> <!DOCTYPE html> -<html> - <head> - <title>Scratch HTML5 vs. Flash</title> - <meta charset="utf-8"> - <link href="player.css" type="text/css" rel="stylesheet" /> - <link href="compare.css" type="text/css" rel="stylesheet" /> - <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> - <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> - <script src="js/util/Timer.js"></script> - <script src="js/util/OffsetBuffer.js"></script> - <script src="js/util/Color.js"></script> - <script src="js/util/Rectangle.js"></script> - <script src="js/Sprite.js"></script> - <script src="js/Reporter.js"></script> - <script src="js/Stage.js"></script> - <script src="js/sound/WAVFile.js"></script> - <script src="js/sound/SoundDecoder.js"></script> - <script src="js/sound/SoundBank.js"></script> - <script src="js/sound/NotePlayer.js"></script> - <script src="soundbank/Instr.js"></script> - <script src="js/IO.js"></script> - <script src="js/primitives/VarListPrims.js"></script> - <script src="js/primitives/MotionAndPenPrims.js"></script> - <script src="js/primitives/LooksPrims.js"></script> - <script src="js/primitives/SensingPrims.js"></script> - <script src="js/primitives/SoundPrims.js"></script> - <script src="js/primitives/Primitives.js"></script> - <script src="js/Interpreter.js"></script> - <script src="js/Runtime.js"></script> - <script src="js/Scratch.js"></script> - <script type="text/javascript"> - if (window.location.hash) { - var project_id = parseInt(window.location.hash.substr(1)); - } else { - var project_id = 10000160; // Default project for display - } - </script> - <script> - var flashLog = null; - $(function() { - // The flashvars tell flash about the project data (and autostart=true) - var flashvars = { - server: encodeURIComponent('scratch.mit.edu'), - debugOps: true, - debugOpCmd: 'debugFlash', - project_id: project_id - }; +<meta charset=utf-8> +<title>Scratch HTML5 vs. Flash</title> - var params = { - allowscriptaccess: 'always', - allowfullscreen: 'false', - wmode: 'direct', - menu: 'false' - }; +<link rel=stylesheet href=player.css> +<link rel=stylesheet href=compare.css> - var flashPlayer = null; - //var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf"; - var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf"; - swfobject.embedSWF(swf_url, "flashScratch", "482", "402", "10.2.0", - "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf", - flashvars, params, null, function(e) { - $('#flashScratch').css('visibility', 'visible'); - if (e.success) flashPlayer = e.ref; - }); +<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> +<script src=//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js></script> - $('#trigger_green_flag, #greenSlide').click(function() { - flashPlayer.ASstartRunning(); - }); +<script src=js/util/Timer.js></script> +<script src=js/util/OffsetBuffer.js></script> +<script src=js/util/Color.js></script> +<script src=js/util/Rectangle.js></script> +<script src=js/Sprite.js></script> +<script src=js/Reporter.js></script> +<script src=js/Stage.js></script> +<script src=js/sound/WAVFile.js></script> +<script src=js/sound/SoundDecoder.js></script> +<script src=js/sound/SoundBank.js></script> +<script src=js/sound/NotePlayer.js></script> +<script src=soundbank/Instr.js></script> +<script src=js/IO.js></script> +<script src=js/primitives/VarListPrims.js></script> +<script src=js/primitives/MotionAndPenPrims.js></script> +<script src=js/primitives/LooksPrims.js></script> +<script src=js/primitives/SensingPrims.js></script> +<script src=js/primitives/SoundPrims.js></script> +<script src=js/primitives/Primitives.js></script> +<script src=js/Interpreter.js></script> +<script src=js/Runtime.js></script> +<script src=js/Scratch.js></script> - // Stop button behavior - $('#trigger_stop').click(function() { - flashPlayer.ASstopRunning(); - }); +<script> + var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160; +</script> - flashLog = $('#flashDebug'); - var jsLog = $('#jsDebug'); - interp.debugOps = true; - interp.debugFunc = function(opCount, opName, args) { - var text = opCount + ': '+opName+'('+args.join(', ')+')'; - jsLog.val(jsLog.val() + text + "\n"); - } +<script> + var flashLog = null; + $(function() { + // The flashvars tell flash about the project data (and autostart=true) + var flashvars = { + server: encodeURIComponent('scratch.mit.edu'), + debugOps: true, + debugOpCmd: 'debugFlash', + project_id: project_id + }; - // Setup synchronized scrolling - flashLog.scroll(function() { - jsLog.scrollTop(flashLog.scrollTop()); - }); + var params = { + allowscriptaccess: 'always', + allowfullscreen: 'false', + wmode: 'direct', + menu: 'false' + }; - jsLog.scroll(function() { - flashLog.scrollTop(jsLog.scrollTop()); - }); + var flashPlayer = null; + //var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf"; + var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf"; + swfobject.embedSWF(swf_url, "flash-scratch", "482", "402", "10.2.0", + "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf", + flashvars, params, null, function(e) { + $('#flash-scratch').css('visibility', 'visible'); + if (e.success) flashPlayer = e.ref; }); - function debugFlash(opCount, opName, args) { - var text = opCount + ': '+opName+'('+args.join(', ')+')'; - flashLog.val(flashLog.val() + text + "\n"); - } - </script> - </head> - <body> - <div class="playerContainer"> - <div id="up">▲</div> - <div id="ui-top"> - <div id="info">Loading…</div> - <button id="trigger_stop">■</button> - <button id="trigger_green_flag">⚑</button> - <div class="clearer"></div> + $('#trigger-green-flag, #overlay').click(function() { + flashPlayer.ASstartRunning(); + }); + + // Stop button behavior + $('#trigger-stop').click(function() { + flashPlayer.ASstopRunning(); + }); + + flashLog = $('#flash-debug'); + var jsLog = $('#js-debug'); + interp.debugOps = true; + interp.debugFunc = function(opCount, opName, args) { + var text = opCount + ': ' + opName + '(' + args.join(', ') + ')'; + jsLog.val(jsLog.val() + text + "\n"); + }; + + // Setup synchronized scrolling + flashLog.scroll(function() { + jsLog.scrollTop(flashLog.scrollTop()); + }); + + jsLog.scroll(function() { + flashLog.scrollTop(jsLog.scrollTop()); + }); + }); + + function debugFlash(opCount, opName, args) { + var text = opCount + ': '+opName+'('+args.join(', ')+')'; + flashLog.val(flashLog.val() + text + "\n"); + } +</script> + +<div class=container> + <div id=player-container> + <div class="arrow vertical" id=up></div> + <div class="arrow vertical" id=down></div> + <div class="arrow horizontal" id=left></div> + <div class="arrow horizontal" id=right></div> + <div id=player-header> + <div id=player-header-preload></div> + <div id=player-header-version>HTML5</div> + <button id=toggle-fullscreen tabindex=1></button> + <button id=trigger-stop tabindex=3></button> + <button id=trigger-green-flag tabindex=2></button> </div> - <div id="left">◀</div> - <div id="overContainer"> - <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div> - <div id="container"></div> + <div id=player-content> + <div id=container></div> + <div id=overlay></div> + <div id=preloader> + <div id=preloader-progress><div id=preloader-progress-bar></div></div> + <div id=preloader-caption>Loading project…</div> + <div id=preloader-details></div> + </div> </div> - <div id="right">▶</div> - <div id="ui-bottom"> - <span id="address-hint">http://scratch.mit.edu/projects/</span><input type="text" name="project_id" id="project_id" placeholder="10000160" /><button id='go_project'>→</button></div> - <div id="down">▼</div> - <textarea id="jsDebug"></textarea> </div> - <div class="playerContainer"> - <div id="flashScratch" style="text-align:center;visibility:hidden;"> - <p style="color:#aaa;font-size:22px;margin-top:14px;line-height:28px;">Oh Noes! Scratch project cannot display.<br/>Flash player is disabled, missing, or less than version 10.2.</p> - <a href="http://www.adobe.com/go/getflashplayer"> - <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" target="_blank" /> - </a> - </div> - <textarea id="flashDebug"></textarea> + <textarea id=js-debug readonly></textarea> + <div id=project-picker> + <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>→</button> </div> - </body> -</html> +</div><div class=container> + <div id=flash-scratch> + <p>Oh Noes! Scratch project cannot display.<br>Flash player is disabled, missing, or less than version 10.2.</p> + <a href=http://www.adobe.com/go/getflashplayer> + <img src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif alt="Get Adobe Flash player" target=_blank> + </a> + </div> + <textarea id=flash-debug readonly></textarea> +</div> diff --git a/img/fullScreenOff.png b/img/fullScreenOff.png new file mode 100644 index 0000000..28e4b20 Binary files /dev/null and b/img/fullScreenOff.png differ diff --git a/img/fullScreenOn.png b/img/fullScreenOn.png new file mode 100644 index 0000000..36b580f Binary files /dev/null and b/img/fullScreenOn.png differ diff --git a/img/greenFlagOff.png b/img/greenFlagOff.png new file mode 100644 index 0000000..e8a3891 Binary files /dev/null and b/img/greenFlagOff.png differ diff --git a/img/greenFlagOn.png b/img/greenFlagOn.png new file mode 100644 index 0000000..b62d085 Binary files /dev/null and b/img/greenFlagOn.png differ diff --git a/img/greenflag.png b/img/playerStartFlag.png similarity index 100% rename from img/greenflag.png rename to img/playerStartFlag.png diff --git a/img/stopOff.png b/img/stopOff.png new file mode 100644 index 0000000..16237b3 Binary files /dev/null and b/img/stopOff.png differ diff --git a/img/stopOn.png b/img/stopOn.png new file mode 100644 index 0000000..8ff3051 Binary files /dev/null and b/img/stopOn.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..220985e --- /dev/null +++ b/index.css @@ -0,0 +1,8 @@ +body { + width: 578px; + padding: 16px; + margin: 0 auto; + background: #fff; + font-family: sans-serif; + color: #000; +} diff --git a/index.html b/index.html index 3fa4be0..8f25615 100755 --- a/index.html +++ b/index.html @@ -1,77 +1,70 @@ <!DOCTYPE html> -<html> - <head> - <title>Scratch HTML5</title> - <meta charset="utf-8"> - <!-- iPad properties: set width, disable pinch zoom --> - <meta name="apple-mobile-web-app-capable" content="yes"> - <meta name="viewport" content="user-scalable=no, width=540" /> - <meta name="apple-mobile-web-app-status-bar-style" content="black"> - <link href="player.css" type="text/css" rel="stylesheet" /> - <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> - <script src="js/util/Timer.js"></script> - <script src="js/util/OffsetBuffer.js"></script> - <script src="js/util/Color.js"></script> - <script src="js/util/Rectangle.js"></script> - <script src="js/Sprite.js"></script> - <script src="js/Reporter.js"></script> - <script src="js/Stage.js"></script> - <script src="js/sound/WAVFile.js"></script> - <script src="js/sound/SoundDecoder.js"></script> - <script src="js/sound/SoundBank.js"></script> - <script src="js/sound/NotePlayer.js"></script> - <script src="soundbank/Instr.js"></script> - <script src="js/IO.js"></script> - <script src="js/primitives/VarListPrims.js"></script> - <script src="js/primitives/MotionAndPenPrims.js"></script> - <script src="js/primitives/LooksPrims.js"></script> - <script src="js/primitives/SensingPrims.js"></script> - <script src="js/primitives/SoundPrims.js"></script> - <script src="js/primitives/Primitives.js"></script> - <script src="js/Interpreter.js"></script> - <script src="js/Runtime.js"></script> - <script src="js/Scratch.js"></script> - <script type="text/javascript"> - if (window.location.hash) { - var project_id = parseInt(window.location.hash.substr(1)); - } else { - var project_id = 10000160; // Default project for display - } - </script> - <script type="text/javascript"> - $(function() { - $("#project_id").keyup(function(){ - // Eventually, this will xhr to /projects/{{this.value}}/ and - // change color based on whether the response is 404 or 200. - if (isNaN(this.value)) { - this.style.backgroundColor = "#FDD"; - } else { - this.style.backgroundColor = "#DFD"; - } - }) - }); - </script> - </head> - <body> - <div id="wrapper"> - <h1>Scratch HTML5 player</h1> - <div id="up">▲</div> - <div id="ui-top"> - <div id="info">Loading…</div> - <button id="trigger_stop">■</button> - <button id="trigger_green_flag">⚑</button> - <div class="clearer"></div> - </div> - <div id="left">◀</div> - <div id="overContainer"> - <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div> - <div id="container"></div> - </div> - <div id="right">▶</div> - <div id="ui-bottom"> - <span id="address-hint">http://scratch.mit.edu/projects/</span><input type="text" name="project_id" id="project_id" placeholder="10000160" /><button id='go_project'>→</button></div> - <div id="down">▼</div> - <p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href="https://github.com/LLK/scratch-html5">on Github</a>. +<meta charset=utf-8> +<title>Scratch HTML5</title> + +<!-- iPad properties: set width, disable pinch zoom --> +<meta name=apple-mobile-web-app-capable content=yes> +<meta name=viewport content="user-scalable=no, width=540"> +<meta name=apple-mobile-web-app-status-bar-style content=black> + +<link rel=stylesheet href=player.css> +<link rel=stylesheet href=index.css> + +<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> + +<script src=js/util/Timer.js></script> +<script src=js/util/OffsetBuffer.js></script> +<script src=js/util/Color.js></script> +<script src=js/util/Rectangle.js></script> +<script src=js/Sprite.js></script> +<script src=js/Reporter.js></script> +<script src=js/Stage.js></script> +<script src=js/sound/WAVFile.js></script> +<script src=js/sound/SoundDecoder.js></script> +<script src=js/sound/SoundBank.js></script> +<script src=js/sound/NotePlayer.js></script> +<script src=soundbank/Instr.js></script> +<script src=js/IO.js></script> +<script src=js/primitives/VarListPrims.js></script> +<script src=js/primitives/MotionAndPenPrims.js></script> +<script src=js/primitives/LooksPrims.js></script> +<script src=js/primitives/SensingPrims.js></script> +<script src=js/primitives/SoundPrims.js></script> +<script src=js/primitives/Primitives.js></script> +<script src=js/Interpreter.js></script> +<script src=js/Runtime.js></script> +<script src=js/Scratch.js></script> + +<script> + var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160; +</script> + +<div id=player-container> + <div class="arrow vertical" id=up></div> + <div class="arrow vertical" id=down></div> + <div class="arrow horizontal" id=left></div> + <div class="arrow horizontal" id=right></div> + <div id=player-header> + <div id=player-header-preload></div> + <div id=player-header-version>HTML5</div> + <button id=toggle-fullscreen tabindex=1></button> + <button id=trigger-stop tabindex=3></button> + <button id=trigger-green-flag tabindex=2></button> </div> - </body> -</html> \ No newline at end of file + <div id=player-content> + <div id=container></div> + <div id=overlay></div> + <div id=preloader> + <div id=preloader-progress><div id=preloader-progress-bar></div></div> + <div id=preloader-caption>Loading project…</div> + <div id=preloader-details></div> + </div> + </div> +</div> + +<div id=project-picker> + <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>→</button> +</div> + +<h1>Scratch HTML5 player</h1> +<p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href=https://github.com/LLK/scratch-html5>on Github</a>.</p> diff --git a/js/Runtime.js b/js/Runtime.js index 8a64f22..4bf603f 100644 --- a/js/Runtime.js +++ b/js/Runtime.js @@ -70,7 +70,7 @@ Runtime.prototype.loadStart = function() { setTimeout(function(runtime) { runtime.loadStart(); }, 50, this); return; } - $('#info').html("Loaded!"); + $('#preloader').css('display', 'none'); setInterval(this.step, 33); this.projectLoaded = true; }; diff --git a/js/Scratch.js b/js/Scratch.js index d08ca06..fbabf3d 100644 --- a/js/Scratch.js +++ b/js/Scratch.js @@ -37,22 +37,43 @@ $(function() { }); // Update the project ID field - $('#project_id').val(project_id); + $('#project-id').val(project_id); + + // Validate project ID field + $('#project-id').keyup(function() { + var n = this.value; + + // Allow URL pasting + var e = /projects\/(\d+)/.exec(n); + if (e) { + n = this.value = e[1]; + } + + // Eventually, this will xhr to /projects/{{this.value}}/ and + // change color based on whether the response is 404 or 200. + $('#project-id, #address-hint').toggleClass('error', isNaN(n)); + }); + + // Focus the actual input when the user clicks on the URL hint + $('#address-hint').click(function() { + $('#project-id').select(); + }); // Go project button behavior - $('#go_project').click(function() { - window.location = "#" + parseInt($('#project_id').val()); + $('#go-project').click(function() { + window.location = '#' + parseInt($('#project-id').val()); window.location.reload(true); }); // Green flag behavior - $('#trigger_green_flag, #greenSlide').click(function() { - $('#greenSlide').css('display', 'none'); + $('#trigger-green-flag, #overlay').click(function() { + if (!runtime.projectLoaded) return; + $('#overlay').css('display', 'none'); runtime.greenFlag() }); // Stop button behavior - $('#trigger_stop').click(function() { + $('#trigger-stop').click(function() { runtime.stopAll(); }); diff --git a/player.css b/player.css index d8797e6..a8be2e9 100644 --- a/player.css +++ b/player.css @@ -1,28 +1,13 @@ -body { - background: #fff; - color: #333; - margin: 0; - padding: 0px; - font-family: sans-serif; -} /* Wrapper wraps the entire player, and the text below and above. Ideally, all CSS selectors would be descendants of #wrapper so that the player is embeddable. */ - #wrapper { - width: 540px; - height: 420px; - margin: auto; -} -/* Container is the Stage */ - #container { - border: none; - cursor: default; - width: 480px; - height: 360px; - overflow: hidden; +#player-container { position: relative; - float: left; + width: 482px; + padding: 48px; + margin: 0 auto; + font-family: sans-serif; /* Before, we accomplished this with e.preventDefault * on the context div. But, we'd like to use those click events * for some things like reporter sliders. @@ -34,102 +19,251 @@ body { -ms-user-select: none; user-select: none; } -/* The pane over a project with the green flag on startup. */ - #greenSlide { - position: absolute; - float: left; - z-index: 500; - /* Hmm, will this break after the 501st sprite? */ - margin-left: 30px; -} -#greenSlideFg { - background-color: rgba(0,0,0,0.4); - padding: 140px 202px; -} -/* iPad arrow key frame */ -/* This is the frame around the stage with various buttons. */ - #ui-top { - width: 540px; - height: 30px; - clear: both; - background-color: #eee; +/* Control bar above the stage */ +#player-header { + width: 480px; + height: 38px; + position: relative; + background: linear-gradient(#fff, #e6e6e6); + border: 1px solid #d1d1d1; + border-bottom: 0; + border-radius: 7px 7px 0 0; } -#up { - padding-top: 10px; - width: 540px; - height: 30px; - clear: both; - background-color: #eee; - border-top-left-radius: 10px; - border-top-right-radius: 10px; + +/* Button styling */ +#player-header button { + border: 0; + background: center center no-repeat; + width: 33px; + height: 38px; + float: right; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +#player-header-preload { + width: 1px; + height: 1px; + position: absolute; + top: -1px; + left: -1px; + background: url(img/fullScreenOn.png), url(img/greenFlagOn.png), url(img/stopOn.png); +} +button#toggle-fullscreen { + background-image: url(img/fullScreenOff.png); + background-position: 10px 8px; + width: 40px; + position: absolute; + top: 0; + left: 0; +} +button#trigger-green-flag { + background-image: url(img/greenFlagOff.png); +} +button#trigger-green-flag:hover { + background-image: url(img/greenFlagOn.png); +} +button#trigger-stop { + background-image: url(img/stopOff.png); +} +button#trigger-stop:hover { + background-image: url(img/stopOn.png); +} + +/* Version number */ +#player-header-version { + position: absolute; + top: 28px; + left: 0; + width: 45px; text-align: center; - color: #ccc; + color: rgba(0, 0, 0, .4); + font: 9px sans-serif; } -#left { - float: left; - width: 30px; + +/* Wrapper for the Stage */ +#player-content { + position: relative; + border: 1px solid #d1d1d1; + border-top: 0; + width: 480px; height: 360px; - background-color: #eee; - line-height: 360px; - color: #ccc; +} + +/* The Stage */ +#container { + position: absolute; + top: 0; + left: 0; + width: 480px; + height: 360px; + cursor: default; + overflow: hidden; +} + +/* Pane over the Stage with the green flag on startup */ +#overlay { + position: absolute; + top: 0; + left: 0; + width: 480px; + height: 360px; + z-index: 10000; + background: url(img/playerStartFlag.png) rgba(0, 0, 0, .26) center center no-repeat; +} + +/* Preloader */ +#preloader { + position: absolute; + z-index: 10001; + top: 50%; + left: 50%; + margin-left: -156px; + margin-top: -61px; + width: 309px; + height: 119px; + border: 1px solid rgb(208, 209, 210); + background: #fff; + border-radius: 12px; + box-shadow: 4px 4px 6px rgba(0, 0, 0, .5); + cursor: default; +} +#preloader-progress { + margin: 24px 30px 14px 29px; + background: rgb(185, 187, 189); + border-radius: 5px; + height: 22px; +} +#preloader-progress-bar { + height: 22px; + background: rgb(0, 161, 216); + border-radius: 5px; + width: 0; +} +#preloader-caption, +#preloader-details { + margin: 14px 0 0 8px; text-align: center; + font-size: 18px; + color: rgba(0, 0, 0, .65); +} +#preloader-details { + margin: 6px 0 0 4px; + font-size: 12px; +} + +/* iPad arrow key frame */ +.arrow { + position: absolute; + top: 0; + left: 0; + width: 578px; + height: 400px; + text-align: center; + font: 24px/48px sans-serif; + color: rgba(0, 0, 0, .2); + cursor: default; +} +.arrow.vertical { + height: 48px; +} +.arrow.horizontal { + width: 48px; + top: 48px; + line-height: 400px; } #right { - float: left; - width: 30px; - height: 360px; - background-color: #eee; - line-height: 360px; - color: #ccc; - text-align: center; + left: 530px; } #down { - padding-top: 10px; - width: 540px; - height: 30px; - background-color: #eee; + top: 448px; +} +#up::before { + content: '\25b2'; +} +#down::before { + content: '\25bc'; +} +#left::before { + content: '\25c0'; +} +#right::before { + content: '\25b6'; +} + +/* Panel for project ID input */ +#project-picker { + margin: 16px 0; text-align: center; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - color: #ccc; + font-size: 16px; + line-height: 18px; } -#ui-bottom { - width: 480px; - height: 30px; - background-color: #eee; - padding-left: 30px; - padding-right: 30px; - clear: both; - text-align: right; +#project-id, +#address-hint { + border: 1px solid #aaa; + padding: 6px; } -.playerContainer { - display: inline-block; - text-align: center; +#project-id { + box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3); + background: 0; + padding-left: 0; + border-left: 0; + margin: 0; + font: inherit; + width: 6em; } +#project-id.error { + background: #fee; + box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3); +} +#address-hint { + box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3); + padding-right: 0; + border-right: 0; +} +#address-hint.error { + background: #fee; + box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3); +} +#go-project { + padding: 6px; + margin: 0; + border: 1px solid #aaa; + border-left: 0; + font: inherit; + background: linear-gradient(#fff, #ddd); + box-shadow: inset 0 -1px rgba(255, 255, 255, .2); + cursor: pointer; +} +#go-project:active { + background: linear-gradient(#ddd, #eee); + box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 2px 5px rgba(0, 0, 0, .1); +} + + /* Reporter styles */ - .reporter-normal { +.reporter-normal { display: inline-block; - padding: 2px 5px 2px 5px; + padding: 2px 7px 3px 5px; background-color: rgb(193, 196, 199); - border: 1px solid rgb(130, 126, 126); - border-radius: 4px; - font-family: sans-serif; - font-size: 11px; - font-weight: bold; + border: 1px solid rgb(148, 145, 145); + border-radius: 6px; + font: bold 11px/15px sans-serif; color: #000; position: absolute; } .reporter-inset { display: inline-block; - min-width: 40px; - margin-left: 5px; + vertical-align: top; + min-width: 38px; + margin-left: 6px; padding: 1px; border: 1px solid #fff; - border-radius: 4px; - -webkit-box-shadow: inset 0 0 3px #fff; - box-shadow: inset 0 0 3px #fff; + border-radius: 6px; + -webkit-box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.7), inset 1px 1px 2px rgba(0, 0, 0, 0.35); + box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.7), inset 1px 1px 2px rgba(0, 0, 0, 0.35); text-align: center; + font: bold 9px/11px sans-serif; color: #fff; } .reporter-large { @@ -139,9 +273,7 @@ body { border-radius: 4px; -webkit-box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset, 0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset; box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset, 0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset; - font-family: sans-serif; - font-size: 15px; - font-weight: bold; + font-family: bold 15px sans-serif; text-align: center; color: #fff; position: absolute; @@ -271,83 +403,3 @@ body { height: 19px; background: url(img/think-bottom.png) transparent no-repeat; } - -#info { - float: left; - margin-left: 30px; - height: 24px; - padding: 3px; - color: #aaa; - font-size: 12px; -} -/* Button styling */ - button { - background-color: #ddd; - border-radius: 3px; - cursor: pointer; - border-style: none; - font-family: sans-serif; - width: 24px; - padding: 3px; - margin: 3px; - margin-top: 0px; - height: 24px; - background: -webkit-gradient(linear, top left, bottom left, from(#ddd), to(#ccc)); - background: -webkit-linear-gradient(#ddd, #ccc); - background: linear-gradient(#ddd, #ccc); -} -button:hover { - background-color: #ccc; - background: -webkit-gradient(linear, top left, bottom left, from(#ccc), to(#bbb)); - background: -webkit-linear-gradient(#ccc, #bbb); - background: linear-gradient(#ccc, #bbb); -} -#trigger_green_flag, #trigger_stop { - padding-top: 0px; - font-size: 20px; - width: 24px; - margin: 3px; - float: right; -} -#trigger_green_flag { - color: #050; -} -#trigger_stop { - color: #F33; - margin-right: 30px; - margin-left: 0px; -} -#clearer { - clear: both; -} -input[type=text] { - display: inline-block; - border-style: none; - border-radius: 4px; - font-family: sans-serif; - background-color: #ddd; - font-size: 14px; - padding: 3px; - height: 18px; - margin: 3px; - width: 100px; -} -input[type=text]:focus { - outline: none; - background-color: #ccc; -} -#project_id { - text-align: center; -} -#address-hint { - font-size: 12px; -} -#go_project { - display: table-cell; - height: 24px; - padding: 0px; - margin-right: 0px; - margin-left: 0px; - margin-top: 3px; - margin-bottom: 0px; -} \ No newline at end of file