201 lines
5.6 KiB
HTML
201 lines
5.6 KiB
HTML
|
<!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>
|
||
|
|
<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/common-sim.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>
|