<!doctype html> <html lang="en" data-framework="typescript"> <head> <meta charset="utf-8"> <title>Assembly Instructions</title> <style> svg { max-width: 100%; } .blocklyText, .ace_editor { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important; } .blocklyText, .ace_editor { font-size: 1rem !important; } .blocklyTreeLabel { font-size: 1.25rem !important; } .blocklyCheckbox { fill: #ff3030 !important; text-shadow: 0px 0px 6px #f00; font-size: 17pt !important; } .ui.card .blocklyPreview { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 1em); max-height: calc(100% - 1em); } code { white-space: pre-wrap; } code.lang-config, code.lang-package { display:none; } code.lang-blocks::before, code.lang-sig::before, code.lang-block::before, code.lang-shuffle::before, code.lang-sim::before, code.lang-cards::before, code.lang-namespaces::before, code.lang-codecard::before { content: "..."; position: absolute; top: calc(50% - 0.5em); left: calc(50% - 5em); } code.lang-blocks, code.lang-sig, code.lang-block, code.lang-shuffle, code.lang-sim, code.lang-cards, code.lang-namespaces, code.lang-codecard { color: transparent; } </style> <style type="text/css"> @import "/cdn/semantic.css"; @import "/cdn/icons.css"; </style> <style> html { padding: 0; margin: 0; } body { padding: 0; margin: 0; font-family: "Lucida Console", Monaco, monospace; } div { /*undo semantic UI*/ box-sizing: content-box; line-height: normal; } img { border: 0; } /*TODO: Share CSS with main webpage*/ .organization { position: absolute; bottom: 2rem; right: 2rem; height: 4rem; } h1 { font-size: 2em; font-weight: normal; color: rgba(0, 0, 0, 0.87); font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; display: block; text-align: center; } #front-panel .board-svg { position: absolute; left: 2rem; width: 300px; top: 16rem; } #proj-title { width: 100%; font-size: 70px; margin-top: 20px; } #proj-code { width: 300px; height: 400px; position: absolute; right: 2rem; top: 16rem; } #proj-code-container { width: 100%; height: 100%; font-size: 4px; overflow: hidden; display: none; } #proj-code-spinner { width: 100%; } .back-panel svg { position: relative; margin: 0 auto; left: inherit; bottom: -7px; } </style> </head> <body> <div id='loading' class="ui active inverted dimmer"> <div class="ui large loader"></div> </div> <!-- start Mixpanel --><script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" "); for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]); mixpanel.init("762fef19c053a0ea4cec43d2fecae76e");</script><!-- end Mixpanel --> <script> // This line gets patched up by the cloud var pxtConfig = null; </script> <script type="text/javascript" src="/cdn/lzma/lzma_worker-min.js"></script> <script type="text/javascript" src="/cdn/marked/marked.min.js"></script> <script type="text/javascript" src="/cdn/jquery.js"></script> <script type="text/javascript" src="/cdn/typescript.js"></script> <script type="text/javascript" src="/cdn/blockly/blockly_compressed.js"></script> <script type="text/javascript" src="/cdn/blockly/blocks_compressed.js"></script> <script type="text/javascript" src="/cdn/blockly/msg/js/en.js"></script> <script type="text/javascript" src="/cdn/pxtlib.js"></script> <script type="text/javascript" src="/cdn/pxtblocks.js"></script> <script type="text/javascript" src="/cdn/pxtsim.js"></script> <script type="text/javascript" src="/cdn/pxtrunner.js"></script> <script type="text/javascript" src="/cdn/semantic.js"></script> <script type="text/javascript" src="/embed.js"></script> <script type="text/javascript" src="/sim/sim.js"></script> <script type="text/javascript"> (function () { ksRunnerReady(function() { var orgLogo = pxt.appTarget.appTheme.organizationLogo; if (orgLogo) $('#front-panel').append( $('<img/>').attr('class', 'organization').attr('src', orgLogo) ); var loading = document.getElementById('loading'); pxsim.instructions.drawInstructions(); $(loading).hide(); }); })(); </script> <div id="front-panel" class="instr-panel"> <h1 id="proj-title"></h1> <!--TODO: extract real code snapshot from PXT --> <div id="proj-code"> <i id="proj-code-spinner" class="spinner loading icon"></i> <div id="proj-code-container"> </div> </div> </div> </body> </html>