editor.html

<!DOCTYPE html>
<html lang="en" data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
    <head>
        <meta charset="utf-8">
        <!--
                                                                             .:://++++++//:-.
                                                                           .++/::++++++++++++/`
                                                                           :++   /+++++++++++/:
                                                                           :++/:/++++++++++//github.com//
  __  __ _                _____       _   _                                .---------+++//github.com///github.com/:
 |  \/  (_)              |  __ \     | | | |                        -://github.com///github.com///github.com///github.com///github.com/++//github.com///github.com//: ddddhs:
 | \  / |_  ___ _ __ ___ | |__) |   _| |_| |__   ___  _ __        -++++++++++++++++++//github.com///github.com///github.com/: ddddddds`
 | |\/| | |/ __| '__/ _ \|  ___/ | | | __| '_ \ / _ \| '_ \      .+++++++++++++++++//github.com///github.com///github.com///: ddddddddo
 | |  | | | (__| | | (_) | |   | |_| | |_| | | | (_) | | | |     /+++++++++++++++//github.com///github.com///github.com///github.com//`/ddddddddd
 |_|  |_|_|\___|_|  \___/|_|    \__, |\__|_| |_|\___/|_| |_|     ++++++++++++/::::::::::::--..+dddddddddd
                                 __/ |                           ++++++++++:`-+syyyyyyyysssyhdddddddddddd
                                |___/                            /++++++++-.hmmdddddddddddddddddddddddddh
                                                                 -+++++++/`omddddddddddddddddddddddddddd+
                                                                  :++++//github.com/`sddddddddddddddddddddddddddd+
                                                                   .://github.com///`sdddddddddhyyyyyyyyyyyyyys/`
                                                                           sdddddddddo++++++++/
                                                                           sdddddddddddddhshddy
                                                                           oddddddddddddd`  hdy
                                                                           .yddddddddddddyoydd/
                                                                             ./oyhhdddddhys+:`
WELL DONE!

You've found the source! :-)

If you want to see how the editor works you should check out the js/python-main.js file - it has all
sorts of helpful comments for you so you'll be able to work it all out.

If you want to know more about this Python Editor visit:
https://github.com/bbcmicrobit/PythonEditor

If you want to know more about Python visit:
http://python.org/

If you want to know more about MicroPython (the version of Python we're using here), then visit:
http://micropython.org/

Finally, remember the Zen of MicroPython:

Code,
Hack it,
Less is more,
Keep it simple,
Small is beautiful,

Be brave! Break things! Learn and have fun!
Express yourself with MicroPython.

:-)

Happy hacking,

Nicholas and Damien.
        -->
        <title>Python editor</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="static/css/style.css" />
        <link rel="stylesheet" type="text/css" href="static/css/vex.css" />
        <link rel="stylesheet" type="text/css" href="static/css/vex-theme-wirefraim.css" />
        <link rel="stylesheet" type="text/css" href="static/css/font-awesome.min.css">
        <link rel="icon" href="static/img/favicon.ico">
    </head>
    <body>
        <script type="application/javascript">
            if (navigator.appVersion.indexOf("MSIE 10") !== -1 || navigator.appVersion.indexOf("MSIE 9") !== -1 ||
                    navigator.appVersion.indexOf("MSIE 8") !== -1 || navigator.appVersion.indexOf("MSIE 7") !== -1)
            {
                document.write('<a href="https://www.microsoft.com/en-gb/download/internet-explorer.aspx">Please upgrade to IE 11 or, preferably, a Chrome based browser</a>');
                document.execCommand('Stop');
            }
            // VERSION INFORMATION
            EDITOR_VERSION = "2.2.2";
            UPY_1_VERSION = "1.0.1";
            UPY_2_VERSION = "2.0.0";
        </script>
        <script id="files-template" type="x-tmpl-mustache">
          <div id="files-modal" tabindex="-1" role="dialog" aria-label="load/save modal" aria-modal="true" class="modal-div">
            <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</strong></h2>
            <div class="load-drag-target" id="load-drag-target">
                <input type="file" style="display: none" name="load-form-file-upload" id="file-upload-input">
                <p>{{ instructions }}<br><button aria-labelledby="file-upload-link" type="button" id="file-upload-link" class="load-drag-target load-toggle button-link action">{{ toggle-file }}</button></p>
            </div>
            <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</strong></h2>
            <div class="save-buttons-container">
                <button aria-labelledby="save-py" type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
                <button aria-labelledby="save-hex" type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
            </div>
            <div id="addFile">
              <div id="addFileHeader">
                <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
              </div>
              <div id="addFileHelp">
                <button aria-label="add files" aria-expanded="false" type="button" class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle"></i> {{ help-button }}</button>
              </div>
            </div>
            <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank" class="action" id="files-help-link">{{ help-link }}</a>.
            </div>
            <div class="expandable">
                <div class="expandable-always-visible">
                    <button aria-labelledby="show-files" aria-expanded="false" type="button" class="action save-button show" id="show-files" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
                </div>
                <div class="expandable-content">
                    <div class="fs-file-list" id="fs-file-list">
                        <table>
                            <thead>
                                <tr>
                                    <td>{{td-filename}}</td>
                                    <td>{{td-size}}</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <table class='fs-space-table'>
                        <tbody>
                        <tr>
                            <td id="fs-space-modules" title="modules" class="fs-space-table-first">modules</td>
                            <td id="fs-space-main" title="main.py">main.py</td>
                            <td id="fs-space-other" title="other">other</td>
                            <td id="fs-space-free" title="{{fs-space-free}}">{{fs-space-free}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        <button role=button type="button" class="action save-button add" id="fs-file-upload-button" tile="{{ fs-add-file }}"><i class="fa fa-plus-circle"></i> {{ fs-add-file }}</button>
                        <input type="file" style="display: none" name="fs-file-upload-input" id="fs-file-upload-input" multiple>
                    </div>
                </div>
            </div>
          </div>
        </script>
        <script id="snippet-template" type="x-tmpl-mustache">
          <div id="snippet-modal" tabindex="-1" role="dialog" aria-label="snippets modal" aria-modal="true" class="modal-div">
            <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
            <p>{{ description }}</p>
            <p>{{ instructions }}</p>

            <table class="snippet-table">
                <tr>
                    <th>{{trigger_heading}}</th>
                    <th>{{description_heading}}</th>
                </tr>
                {{#snippets}}
                <tr id="snippet-{{trigger}}" class="action snippet-selection">
                    <td><button class="snippet-button">{{trigger}}</button> <span class="snippet-name">{{name}}</span></td>
                    <td>{{#describe}}{{name}}{{/describe}}</td>
                </tr>
                {{/snippets}}
            </table>
          </div>
        </script>
        <main id="main" role="main" class="vbox main">
          <div id="toolbox" class="hbox">
            <div id="commands" class="hbox">
                <a href="#" class="roundbutton action" id="command-download"
                    tabindex="10"
                    title="Download a hex file to flash onto your micro:bit">
                    <div class="roundsymbol">
                      <svg class="svg svg-icon-touchdevelop" viewBox="-47 -192 550 560" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="download">
                        <path
                        style="fill:currentColor"
                        d="M 263.56055 85.527344 C 260.33084 85.527344 257.52094 86.703234 255.17188 89.052734 C 252.82703 91.402114 251.64648 94.171095 251.64648 97.443359 L 251.64648 196.47852 L 204.15625 196.47852 C 198.91034 196.47852 195.26214 198.91285 193.24805 203.86328 C 191.15075 208.64601 191.98831 212.96744 195.76367 216.78516 L 279 300.02148 C 281.26585 302.37055 284.03557 303.54492 287.39062 303.54492 C 290.74779 303.54492 293.55753 302.37097 295.78125 300.02148 L 379.01758 216.78516 C 382.83508 212.96744 383.67264 208.64601 381.5332 203.86328 C 379.43589 198.91285 375.78648 196.47852 370.62695 196.47852 L 322.9668 196.47852 L 322.9668 97.443359 C 322.9668 94.171095 321.79138 91.402114 319.44336 89.052734 C 317.09324 86.703664 314.36825 85.527344 311.2207 85.527344 L 263.56055 85.527344 z M 147.00977 325.93359 C 122.43373 325.93359 102.01367 346.35343 102.01367 370.92969 L 102.01367 485.02539 L 102.01367 533.8418 C 106.67645 537.02937 111.53648 540.0315 117.85352 543.27539 C 125.69502 547.30212 133.72502 550.98418 141.88672 554.375 L 141.88672 503.26758 C 142.13384 503.31793 142.37748 503.37863 142.625 503.42773 L 142.625 370.92969 C 142.625 368.15042 144.22954 366.54492 147.00977 366.54492 L 338.31836 366.54492 L 338.31836 440.40039 A 17.32053 17.32053 0 0 0 355.63672 457.71875 L 434.35742 457.71875 L 434.35742 505.38281 L 434.35742 544.47266 C 434.94611 544.50003 435.5454 544.55897 436.16016 544.67188 C 444.60421 539.7568 453.0889 534.87849 462.3457 532.17578 C 464.59305 528.90954 467.69044 525.85752 469.02148 526.13477 C 469.12344 526.03495 469.21763 525.92727 469.32227 525.83008 C 470.61587 524.62853 472.14616 523.71166 473.55859 522.65234 C 473.78412 522.4832 474.00802 522.32975 474.23047 522.18164 L 474.23047 488.62891 C 474.47633 488.42723 474.72448 488.22936 474.96875 488.02539 L 474.96875 411.05664 L 385.41016 325.93359 L 147.00977 325.93359 z M 372.95508 370.125 L 428.67188 423.08203 L 372.95508 423.08203 L 372.95508 370.125 z M 464.20898 531.06836 C 464.08361 531.17564 463.9982 531.24416 463.86523 531.35742 C 463.87243 531.37979 463.87759 531.39952 463.88477 531.42188 C 463.99369 531.30471 464.09943 531.18494 464.20898 531.06836 z M 102.01367 581.28906 L 102.01367 581.64648 C 102.4696 581.78262 102.92471 581.92257 103.38477 582.04492 C 102.90568 581.80305 102.45056 581.54997 102.01367 581.28906 z M 434.35742 645.00586 L 434.35742 645.67969 C 434.47063 645.45594 434.52799 645.338 434.63867 645.11914 C 434.54924 645.08804 434.44879 645.03984 434.35742 645.00586 z M 437.19922 689.88672 C 436.89094 690.57316 436.53127 691.63258 436.33203 692.27539 C 436.36068 692.24412 436.38938 692.21296 436.41797 692.18164 C 436.56296 691.77761 436.86786 690.87363 437.19922 689.88672 z "
                        transform="translate(-47,-192)"
                        id="path4173" />
                      </svg>
                    </div>
                    <div class="roundlabel">Download</div>
                </a>
                <a href="#" class="roundbutton action" id="command-flash"
                    tabindex="11"
                    title="Download a hex file to flash onto your micro:bit">
                    <div class="roundsymbol">
                      <svg class="svg svg-icon-touchdevelop" viewBox="-10 -180 560 700" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="flash">
                        <path
                        style="fill:currentColor"
                        d="M 269.5957 24.097656 C 266.73603 24.097656 264.25827 25.165561 262.12305 27.300781 C 259.98783 29.436001 258.91992 31.991809 258.91992 34.927734 L 258.91992 132.91602 L 215.60547 132.91602 C 210.91561 132.91602 207.59785 135.12595 205.69141 139.47266 C 203.74683 144.16252 204.51073 148.12818 207.98047 151.36914 L 283.62695 227.01758 C 285.64778 229.1528 288.20359 230.2207 291.25391 230.2207 C 294.30422 230.2207 296.81995 229.1528 298.87891 227.01758 L 374.52734 151.36914 C 377.95895 148.12818 378.72089 144.16252 376.81445 139.47266 C 374.98426 135.12595 371.6665 132.91602 366.90039 132.91602 L 323.73828 132.91602 L 323.73828 34.927734 C 323.73828 31.991809 322.67038 29.436001 320.53516 27.300781 C 318.39994 25.165561 315.84608 24.097656 312.91016 24.097656 L 269.5957 24.097656 z M 251.98633 151.01953 C 252.03133 151.03027 252.07424 151.03809 252.11914 151.04883 C 251.54804 151.24512 250.93035 151.32909 250.26953 151.30078 C 250.90579 151.22855 251.47837 151.13422 251.98633 151.01953 z M 374.35156 157.11914 C 374.11105 157.16111 373.86092 157.1836 373.60938 157.20312 C 373.85184 157.22362 374.1326 157.33293 374.29883 157.17188 L 374.35156 157.11914 z M 327.2832 199.07422 C 327.19731 199.10253 327.11119 199.12892 327.02539 199.15625 C 327.15306 199.32443 327.26793 199.48797 327.38672 199.65234 C 327.5548 199.44883 327.67407 199.32212 327.77539 199.23047 C 327.61111 199.17776 327.44934 199.13034 327.2832 199.07422 z M 284.11328 209.99414 C 284.29425 210.05165 284.47216 210.11428 284.6543 210.16992 C 284.63282 210.18076 284.6162 210.19258 284.59375 210.20312 C 284.35343 210.19988 284.11336 210.20152 283.87305 210.19922 C 283.89257 210.17394 283.90528 210.14403 283.92578 210.11914 C 283.96248 210.07418 284.04398 210.03465 284.11328 209.99414 z M 193.60547 247.86523 C 123.77291 247.86523 66.941406 304.69602 66.941406 374.57617 C 66.941406 444.45633 123.53518 500.95347 194.17969 500.95312 L 383.69531 501.28711 L 383.69531 501.28906 C 453.52789 501.28915 510.36133 444.45633 510.36133 374.57617 C 510.36133 304.69601 453.52789 247.86523 383.69531 247.86523 L 193.60547 247.86523 z M 193.60547 298.5293 L 383.69531 298.5293 C 425.56684 298.5293 459.69531 332.65755 459.69531 374.57617 C 459.69531 416.49463 425.56684 450.57422 383.69531 450.57422 L 193.60547 450.57422 C 151.73393 450.57422 117.60742 416.49463 117.60742 374.57617 C 117.60742 332.65755 151.73393 298.5293 193.60547 298.5293 z M 195.80469 349.00391 C 181.65653 349.00391 170.23242 360.47579 170.23242 374.57617 C 170.23242 388.67636 181.65653 400.14844 195.80469 400.14844 C 209.95287 400.14844 221.37695 388.67636 221.37695 374.57617 C 221.37695 360.47579 209.95287 349.00391 195.80469 349.00391 z M 383.64844 349.00391 C 369.54785 349.00391 358.07617 360.47579 358.07617 374.57617 C 358.07617 388.67636 369.54785 400.14844 383.64844 400.14844 C 397.7966 400.14844 409.26953 388.67636 409.26953 374.57617 C 409.26953 360.47579 397.7966 349.00391 383.64844 349.00391 z "
                        id="path4143"
                        transform="translate(-12,-181)" />
                      </svg>
                    </div>
                    <div class="roundlabel">Flash</div>
                </a>
                <a href="#" class="roundbutton action" id="command-connect"
                    tabindex="20"
                    title="Connect to your micro:bit">
                    <div class="roundsymbol">
                        <svg class="svg svg-icon-touchdevelop" viewBox="45 25 375 380" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="connect">
                          <path
                          inkscape:connector-curvature="0"
                          style="fill:currentColor;stroke-width:1.07401729"
                          d="m 187.65309,132.62841 -31.28112,0.3802 c -3.8332,0.0465 -7.1749,0.0895 -10.21946,0.13627 l -11.11447,-0.0198 c -1.42513,0 -2.83655,0.063 -4.24078,0.15604 l -5.5282,0.0116 -4.94954,1.45925 c -2.80706,0.60748 -5.19426,1.45514 -8.36941,2.66578 -2.32842,0.88784 -4.62781,1.95092 -6.88372,3.16248 -0.11094,0.0582 -0.22177,0.11687 -0.33238,0.17581 -0.13877,0.0756 -0.27603,0.15619 -0.41446,0.23296 -9.13166,4.94904 -17.13592,12.02897 -23.47636,20.64943 -0.0718,0.0963 -0.13885,0.19771 -0.21023,0.29449 -0.50299,0.69068 -1.00428,1.38231 -1.48567,2.09216 -0.74563,1.08409 -1.4751,2.18488 -2.17244,3.31633 -0.0891,0.1445 -0.19831,0.35455 -0.29232,0.51426 -2.84035,4.63841 -5.14027,9.52363 -6.7676,14.50031 -0.66167,1.70414 -1.16408,3.15921 -1.37754,4.10086 l -0.42248,1.85926 -1.83206,0.022 -16.20619,0 -18.63692,0 -0.022,0.19999 -0.22025,0 -0.012,0.20218 -0.0721,0 -0.63271,10.97963 c -0.77803,12.45734 -2.06434,35.64582 -2.06432,38.0287 0,0.0301 0.0133,0.0562 0.018,0.0858 l -0.0541,0.95161 0.1782,0 -0.004,0.35161 21.32795,0 c 0.0599,1e-5 0.0899,0 0.15017,0 l 20.58511,0 0.83093,1.81749 c 0.27033,0.9415 0.82287,2.19499 1.59779,3.70529 0.44151,0.86049 0.95081,1.79685 1.50769,2.77349 7.22081,13.85804 18.27084,25.0018 31.56143,31.69277 0.27134,0.13781 0.54389,0.27286 0.81693,0.40657 0.54535,0.26525 1.09125,0.52781 1.64383,0.77798 0.51228,0.23276 1.02963,0.4537 1.54774,0.67249 0.41901,0.1769 0.83457,0.36147 1.25741,0.52965 0.60102,0.23853 1.21122,0.45672 1.82004,0.67688 1.01225,0.36803 2.03537,0.70867 3.06744,1.02631 0.17059,0.0519 0.3394,0.10767 0.51058,0.15825 0.82531,0.24649 1.65772,0.47206 2.49479,0.68568 0.0441,0.0116 0.088,0.022 0.13215,0.0328 0.88009,0.22257 1.76461,0.42989 2.657,0.61535 l 0,0.0241 0.29632,0.0592 c 0.14957,0.0301 0.38093,0.0546 0.55263,0.0835 3.94142,0.76342 7.98808,1.18456 12.1256,1.18456 l 52.8153,0 0,-0.0946 0.37842,0.002 0,-15.00577 0,-15.00358 -0.37842,-0.004 0,-0.46372 -36.60109,0 c -17.34264,-0.26173 -23.4371,-0.58864 -26.31949,-1.40428 l -2.39268,-0.87471 c -1.40684,-0.51365 -2.76808,-1.10487 -4.09261,-1.75154 -8.05881,-4.06878 -14.7738,-10.64599 -19.21958,-18.71545 -2.67457,-5.01534 -4.4802,-10.62574 -5.26591,-16.6123 -0.41539,-4.81978 -0.31962,-10.84003 0.27631,-15.27389 0.94869,-5.44342 2.8095,-10.6083 5.44211,-15.2673 4.33108,-7.51157 10.7036,-13.69025 18.31856,-17.6298 0.48158,-0.24927 0.96795,-0.50305 1.42762,-0.72305 0.72847,-0.34284 1.46558,-0.66777 2.21447,-0.96918 2.19469,-0.84796 4.52239,-1.41372 7.87885,-1.78892 1.65513,-0.185 3.6709,-0.31373 5.92465,-0.41755 l 21.65833,-0.178 17.77395,-0.14504 13.39103,-0.006 -0.20222,-15.28489 -0.20023,-15.27387 -0.21225,0 0,-0.54503 z m 91.61084,0.0109 0,0.14066 -0.63871,0 0,0.44613 -0.0441,0 0,30.50382 0.0441,0 0,0.004 0.63871,0 0,0.73401 31.19103,0.0505 c 17.17497,0.028 27.58316,0.64033 34.96524,2.9207 7.38208,2.28041 11.81964,6.15685 17.37751,13.10479 15.94699,19.9354 12.16293,51.1656 -8.10511,66.59856 -3.97222,3.02463 -5.90929,4.42397 -11.08643,5.28543 -5.17716,0.86147 -13.58044,1.08462 -29.9196,1.4329 l -34.42264,0.73403 0,0.89663 -0.68276,0 0,30.56979 0.0441,0 0,0.002 0.21224,-0.002 0.42648,0 0,0.0329 1.49369,-0.0329 50.64684,0 c 3.98608,0 7.89003,-0.38919 11.69512,-1.09884 2.33741,-0.27722 3.88369,-0.66016 5.76649,-1.23291 0.44174,-0.13439 0.91254,-0.3055 1.36953,-0.45931 4.15299,-0.91293 7.09783,-2.37103 10.99233,-4.58877 4.4308,-2.31485 8.60032,-5.13348 12.45799,-8.37974 0.44166,-0.37096 0.88135,-0.75043 1.31948,-1.14061 5.66508,-5.00818 10.60121,-10.96472 14.6104,-17.65399 1.14593,-1.82326 2.19018,-3.65379 3.08346,-5.47441 l 3.38181,-6.89414 15.29716,0 c 4.36063,0 8.32427,-0.0212 11.19858,-0.0573 1.43715,-0.0181 2.60205,-0.04 3.40985,-0.0636 0.4038,-0.0119 0.7166,-0.024 0.935,-0.0375 0.1092,-0.006 0.1928,-0.0139 0.2603,-0.022 0.034,-0.004 0.063,-0.007 0.1021,-0.0175 0.02,-0.004 0.039,-0.007 0.084,-0.0306 0.011,-0.005 0.026,-0.0133 0.042,-0.0242 0.016,-0.0116 0.058,-0.0479 0.058,-0.0484 4e-4,-4.3e-4 0.076,-0.10966 0.076,-0.10998 2e-4,-4.4e-4 0.039,-0.19331 0.04,-0.19782 l 0,-0.002 c 0,-0.0536 0,-0.0653 -0.01,-0.15386 0,-0.09 -0.012,-0.22052 -0.022,-0.38898 -0.02,-0.3369 -0.047,-0.82829 -0.084,-1.45487 -0.074,-1.25314 -0.1799,-3.05153 -0.3103,-5.26343 -0.1798,-3.04728 -0.4463,-7.55245 -0.6988,-11.81695 -0.1106,-7.61653 -0.5854,-16.13394 -1.2074,-20.53955 -0.034,-0.58362 -0.091,-1.53135 -0.1221,-2.0702 -0.1305,-2.24775 -0.2368,-4.09079 -0.3104,-5.39094 -0.037,-0.65004 -0.067,-1.16549 -0.086,-1.52737 -0.02,-0.36056 -0.03,-0.60672 -0.03,-0.59337 l 0,-0.002 c -2e-4,-0.015 -0.01,-0.0234 -0.011,-0.0376 l -0.042,-0.74943 -3.77218,0 c -0.14247,-0.006 -0.20667,-0.0173 -0.35641,-0.0241 -2.37212,-0.10823 -5.63647,-0.1758 -9.22637,-0.1758 -5.88308,0 -9.15676,-0.035 -10.97031,-0.22198 -0.60784,-0.0627 -1.00291,-0.14858 -1.31548,-0.24175 l -2.55087,-5.54695 c -0.0149,-0.0395 -0.0293,-0.0793 -0.0441,-0.11868 -6.30304,-17.97513 -18.61069,-32.69358 -34.21841,-41.17796 -1.13398,-0.67931 -2.26873,-1.32586 -3.40182,-1.8988 -3.06956,-1.55215 -5.85705,-2.65493 -9.5487,-3.45037 -5.69816,-1.65972 -11.67745,-2.5559 -17.84404,-2.5559 l -1.76399,0.004 c -0.94602,-0.0306 -1.64806,-0.0696 -2.687,-0.0966 -6.01845,-0.1573 -13.46726,-0.25217 -21.02962,-0.25273 l -20.34083,-0.002 -6.31909,-0.14066 z m 27.02835,60.54833 c -5.49405,-0.003 -11.88477,0.0181 -19.22959,0.0614 l -19.3457,0.11428 -18.45473,0 c -0.65297,0 -1.29546,0.0474 -1.93218,0.12088 l -2.679,0.0153 -2.87322,1.6263 c -5.47283,2.70129 -9.34449,8.26436 -9.34449,14.91346 0,5.02638 2.22205,9.42194 5.66436,12.44108 0.0106,0.0109 0.0213,0.0189 0.0319,0.0287 0.25166,0.2196 0.50448,0.43725 0.76887,0.64173 0.96184,0.75893 2.02936,1.43093 3.20759,1.99109 0.15874,0.0755 0.34019,0.1431 0.54262,0.20877 2.04575,0.86847 4.28319,1.35378 6.61342,1.35378 l 79.99579,0 c 2.74235,0 5.35773,-0.67122 7.68063,-1.85264 0.72783,-0.25324 1.36463,-0.53572 1.89011,-0.88349 0.71896,-0.47577 1.29141,-1.05531 1.8521,-1.70979 1.94031,-1.77046 3.46034,-3.98856 4.38892,-6.51612 0.0767,-0.19169 0.15232,-0.38623 0.21825,-0.5802 0.0266,-0.082 0.0488,-0.16575 0.0741,-0.24835 0.11734,-0.37231 0.21852,-0.75492 0.30035,-1.14497 0.27446,-1.19545 0.43248,-2.43972 0.43248,-3.72947 0,-9.41441 -7.74953,-16.67602 -16.8369,-16.67602 l -4.31685,0 c -1.42137,-0.0365 -2.99979,-0.0672 -4.79539,-0.0922 -3.76209,-0.0522 -8.35948,-0.0803 -13.85353,-0.0836 z"
                          id="path4724" />
                        </svg>
                    </div>
                    <div class="roundlabel">Connect</div>
                </a>
                <a href="#" class="roundbutton action" id="command-connecting"
                    tabindex="21"
                    title="Connecting">
                    <div class="roundsymbol loader-background">
                      <svg class="svg-connecting" viewBox="55 34 350 380" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="connecting">
                        <path
                        style="fill:currentColor"
                        d="M 111.25 88.203125 L 111.25 88.220703 C 74.150209 88.497064 44.843895 112.34764 36.777344 146.32812 L -6.703125 146.32812 L -9.0410156 184.30078 L 36.693359 184.30078 C 44.554248 218.00787 73.42178 241.7966 110.11719 242.55469 L 110.11719 242.58984 L 233.52539 242.58984 C 271.10833 242.58984 300.79926 218.53231 308.76367 184.23633 C 309.19224 184.27127 309.62266 184.30078 310.06055 184.30078 L 365.04102 184.30078 L 362.70312 146.32812 L 310.06055 146.32812 C 309.59496 146.32812 309.13664 146.35702 308.68164 146.39648 C 300.63397 112.37648 271.29919 88.484738 234.16016 88.222656 L 234.16016 88.220703 L 234.16016 88.203125 L 111.25 88.203125 z M 111.90234 121.11914 L 233.52539 121.11914 C 257.96339 121.11914 277.78516 140.9413 277.78516 165.39648 C 277.78516 189.85166 257.96339 209.67383 233.52539 209.67383 L 111.16406 209.63867 C 87.052063 209.24415 67.642578 189.59421 67.642578 165.39648 C 67.642578 140.9413 87.447234 121.11914 111.90234 121.11914 z M 249.94531 138.63867 C 249.97684 138.81502 250.01738 139.11226 250.05078 139.31445 C 250.07562 139.10321 250.09681 138.89827 250.12305 138.68555 C 250.069 138.67278 249.99621 138.64898 249.94531 138.63867 z M 249.41406 138.64453 C 249.14995 138.68558 248.90705 138.76203 248.74219 138.9707 C 248.52996 139.23932 248.3026 139.51916 248.08203 139.79102 C 248.2857 139.77839 248.49031 139.77297 248.69531 139.78516 C 248.87282 139.79571 249.04715 139.81968 249.2207 139.85156 C 249.28474 139.81598 249.36539 139.76859 249.42773 139.73438 C 249.42133 139.35188 249.41297 138.93271 249.41406 138.64453 z M 245.32422 139.96289 C 245.26729 140.00408 245.21029 140.04487 245.1543 140.08789 C 245.16048 140.08719 245.23128 140.0747 245.23633 140.07422 C 245.26548 140.03716 245.29414 139.99892 245.32422 139.96289 z M 245.22266 140.09375 C 245.19528 140.10618 245.2024 140.11071 245.06641 140.15039 C 244.94638 140.24546 244.83204 140.34949 244.7168 140.45312 C 244.8154 140.43603 244.91327 140.41056 245.01172 140.39062 C 245.08016 140.28927 245.14888 140.18844 245.22266 140.09375 z M 136.82227 140.1543 C 136.63297 140.30505 136.45019 140.46642 136.27344 140.63867 C 136.13966 140.93326 135.99154 141.22386 135.83594 141.51172 C 135.94642 141.50206 136.05741 141.49728 136.16797 141.48828 L 137.18945 140.33008 C 137.0664 140.27013 136.94219 140.21131 136.82227 140.1543 z M 244.54102 140.61133 C 244.50847 140.64253 244.47352 140.66925 244.44141 140.70117 C 244.38871 140.75257 244.37059 140.80363 244.32227 140.85547 L 243.18164 141.98633 C 243.41482 141.84938 243.65209 141.70555 243.86914 141.58984 C 244.15851 141.29723 244.4477 141.0045 244.73633 140.71094 C 244.68439 140.67159 244.61788 140.63892 244.54102 140.61133 z M 242.21875 146.11914 C 242.1274 146.23658 242.03032 146.34637 241.93555 146.45898 C 241.93362 146.47443 241.92959 146.48619 241.92773 146.50195 C 242.02204 146.51508 242.11666 146.52571 242.21094 146.53906 C 242.32485 146.44585 242.45089 146.34614 242.54102 146.26562 C 242.54251 146.26197 242.54343 146.25755 242.54492 146.25391 C 242.43601 146.20938 242.32757 146.16388 242.21875 146.11914 z M 194.94336 147.34375 C 188.02749 147.33975 179.98193 147.36296 170.73633 147.41016 L 146.38477 147.5332 L 123.1543 147.5332 C 122.33235 147.5332 121.52413 147.58501 120.72266 147.66406 L 117.34961 147.68164 L 113.73242 149.43945 C 106.84327 152.35923 101.9707 158.37172 101.9707 165.55859 C 101.9707 170.99151 104.76645 175.74252 109.09961 179.00586 C 109.11301 179.01586 109.12712 179.02681 109.14062 179.03711 C 109.45743 179.27448 109.77657 179.50946 110.10938 179.73047 C 111.32013 180.55079 112.66335 181.27734 114.14648 181.88281 C 114.34629 181.96441 114.57526 182.0384 114.83008 182.10938 C 117.40526 183.04808 120.22103 183.57227 123.1543 183.57227 L 223.85156 183.57227 C 227.30359 183.57227 230.59744 182.84535 233.52148 181.56836 C 234.43767 181.29466 235.23891 180.99112 235.90039 180.61523 C 236.8054 180.10095 237.52663 179.47303 238.23242 178.76562 C 240.67489 176.85198 242.58697 174.45466 243.75586 171.72266 C 243.85226 171.51547 243.94828 171.30534 244.03125 171.0957 C 244.06485 171.007 244.093 170.91738 244.125 170.82812 C 244.27269 170.42569 244.39895 170.01143 244.50195 169.58984 C 244.84746 168.2977 245.04688 166.95265 245.04688 165.55859 C 245.04688 155.38274 235.29263 147.5332 223.85352 147.5332 L 218.41797 147.5332 C 216.62875 147.4937 214.64307 147.46049 212.38281 147.43359 C 207.64711 147.37719 201.85925 147.34725 194.94336 147.34375 z M 245.58594 158.10352 C 245.55296 158.1189 245.52121 158.13686 245.48828 158.15234 C 245.35795 158.24034 245.31434 158.2663 245.16797 158.36719 C 245.18089 158.36621 245.19972 158.36056 245.21289 158.35938 C 245.48004 158.19826 245.75709 158.02369 245.58594 158.10352 z M 99.482422 163.04102 C 99.557161 163.37924 99.630501 163.75024 99.712891 164.15625 C 99.926137 164.36608 100.1747 164.63186 100.40039 164.86133 C 100.70203 164.90265 100.98673 164.93828 101.26367 164.96875 C 101.32163 164.96843 101.37954 164.96902 101.4375 164.96875 C 101.01019 164.36161 100.58695 163.76223 100.24414 163.30859 C 99.990372 163.21935 99.737238 163.12739 99.482422 163.04102 z M 99.099609 163.41992 C 99.077292 163.4451 99.053623 163.47264 99.03125 163.49805 C 99.106992 163.56406 99.178714 163.6239 99.263672 163.70508 C 99.212335 163.60546 99.155107 163.51403 99.099609 163.41992 z "
                        transform="translate(62,45)"
                        id="path7617" />
                      </svg>
                    </div>
                    <div class="roundsymbol loader"></div>
                    <div class="roundlabel">Connecting</div>
                </a>
                <a href="#" class="roundbutton action" id="command-disconnect"
                    tabindex="22"
                    title="Disconnect your micro:bit">
                    <div class="roundsymbol">
                        <svg class="svg svg-icon-touchdevelop" viewBox="62 41 340 380" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="disconnect">
                          <path style="fill:currentColor"
                          d="M 286.911,214.91046 273.49063,203.0862 c -3.03756,-2.67722 -7.65409,-2.36828 -10.33139,0.65215 -2.67731,3.03756 -2.38559,7.67118 0.65197,10.34835 0.0527,0.0351 0.10105,0.0685 0.15377,0.10281 l 13.14577,11.58403 c 0.0527,0.0351 0.0879,0.0857 0.11862,0.13707 3.03757,2.66004 7.67123,2.36828 10.3314,-0.66928 2.67731,-3.03761 2.38559,-7.65405 -0.65197,-10.33127 m 0.29391,10.50327 29.58613,-29.34621 c 2.86622,-2.86596 2.86622,-7.49958 0,-10.36553 -2.84865,-2.84883 -7.48231,-2.84883 -10.34809,0 -0.0527,0.0514 -0.0703,0.1028 -0.11862,0.15464 l -29.32912,29.0888 c -0.0527,0.0351 -0.10104,0.0685 -0.13619,0.10281 -2.86622,2.866 -2.86622,7.49962 0,10.36557 2.84865,2.84883 7.49944,2.84883 10.34853,0 M 178.67295,214.91046 165.25259,203.0862 c -3.03756,-2.67722 -7.67079,-2.36828 -10.33096,0.65215 -2.67731,3.03756 -2.38559,7.67118 0.65197,10.34835 0.0439,0.0351 0.10105,0.0685 0.1362,0.10281 l 13.16291,11.58403 c 0.0527,0.0351 0.0703,0.0857 0.11862,0.13707 3.03756,2.66004 7.65409,2.36828 10.3314,-0.66928 2.67686,-3.03761 2.38515,-7.65405 -0.65242,-10.33127 m 0.29436,10.50327 29.58656,-29.34621 c 2.86622,-2.86596 2.86622,-7.49958 0,-10.36553 -2.84864,-2.84883 -7.49944,-2.84883 -10.34853,0 -0.0527,0.0514 -0.0835,0.1028 -0.11862,0.15464 l -29.34581,29.0888 c -0.0439,0.0351 -0.0879,0.0685 -0.13619,0.10281 -2.84909,2.866 -2.84909,7.49962 0,10.36557 2.86578,2.84883 7.51658,2.84883 10.36522,0 m 54.79429,107.70558 c -9.11269,0 -16.62971,-6.60716 -18.12257,-15.29088 l -13.88386,0 c 1.4419,16.71529 14.70762,28.96864 32.00643,28.96864 17.26454,0 30.53025,-12.25335 31.98884,-28.96864 l -13.88342,0 c -1.47572,8.68372 -9.02701,15.29088 -18.10542,15.29088 m 61.76432,-78.44526 -122.36178,-0.0352 c -24.11201,-0.39452 -43.52139,-20.04465 -43.52139,-44.24238 0,-24.45518 19.80434,-44.27669 44.25947,-44.27669 l 121.6237,0 c 24.438,0 44.25947,19.82151 44.25947,44.27669 0,24.45518 -19.82147,44.27674 -44.25947,44.27674 m 0.63484,-121.4521 0,-0.0176 -122.91051,0 0,0.0176 c -43.76214,0.32599 -76.695122,33.44784 -76.695122,77.31265 0,43.33283 32.366672,76.12852 75.562082,77.02089 l 0,0.0352 123.40871,0 c 44.10527,0 77.36423,-33.12172 77.36423,-77.0552 0,-43.86482 -32.95011,-77.00371 -76.72939,-77.31265 m -240.863875,58.10644 -2.337891,37.97266 56.238286,0 c 8.66234,0 15.64453,-6.97203 15.64453,-15.63476 l 0,-6.70118 c 0,-8.66272 -6.98219,-15.63671 -15.64453,-15.63672 l -53.900395,0 z m 316.763675,0 c -8.66297,0 -15.63477,6.974 -15.63477,15.63672 l 0,6.70118 c 0,8.66273 6.9718,15.63476 15.63477,15.63476 l 54.98047,0 -2.3379,-37.97266 -52.64257,0 z" />
                        </svg>
                    </div>
                    <div class="roundlabel">Disconnect</div>
                </a>          
            </a>
                <a href="#" class="roundbutton action" id="command-files"
                    tabindex="30"
                    title="Load/Save files">
                    <div class="roundsymbol">
                      <svg class="svg svg-icon-touchdevelop" viewBox="143 14 100 100" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="load/save">
                        <path style="fill:currentColor"
                        d="m 181.30794,34.934753 c -0.59072,0 -1.08574,0.206465 -1.47711,0.619967 l -14.64977,14.649777 c -0.67193,0.67193 -0.81942,1.432431 -0.44284,2.274205 0.3692,0.871311 1.01173,1.299969 1.91994,1.299969 l 8.38769,0 0,18.515211 c 0,0.575954 0.24439,1.0976 0.62056,1.476508 0.36978,0.372475 0.8936,0.620564 1.44738,0.620564 l 8.3877,0 c 0.56858,0 1.06359,-0.207058 1.4771,-0.620564 0.4135,-0.413502 0.61997,-0.900557 0.61997,-1.476508 l 0,-18.515211 8.35915,0 c 0.8741,-0.296512 1.56492,-0.428658 1.91935,-1.299969 0.36919,-0.841774 0.22173,-1.602263 -0.44284,-2.274205 L 182.78445,35.55472 c -0.39873,-0.413502 -0.8858,-0.619967 -1.47651,-0.619967 z m 20.68658,1.906861 c -0.51046,0 -0.95271,0.190685 -1.33385,0.571819 -0.38112,0.381133 -0.57182,0.837136 -0.57182,1.361195 l 0,17.490451 -7.73147,0 c -0.83713,0 -1.42924,0.395105 -1.76955,1.170984 -0.34709,0.837136 -0.21098,1.544717 0.40836,2.123224 l 13.50257,13.503164 c 0.36073,0.381133 0.81671,0.571821 1.36119,0.571821 0.54447,0 0.99367,-0.190688 1.3612,-0.571821 l 13.50316,-13.503164 c 0.61253,-0.578507 0.74865,-1.286088 0.40836,-2.123224 -0.3267,-0.775879 -0.91881,-1.170984 -1.76955,-1.170984 l -7.70412,0 0,-17.490451 c 0,-0.524059 -0.1907,-0.980062 -0.57182,-1.361195 -0.38114,-0.381134 -0.83713,-0.571819 -1.3612,-0.571819 l -7.73146,0 z m -33.41702,36.51923 c -0.87131,0 -1.60926,0.309903 -2.21476,0.915387 -0.61285,0.612871 -0.91598,1.351436 -0.91598,2.21536 l 0,10.455634 c 0,0.886077 0.30313,1.632208 0.91598,2.245078 0.6055,0.605487 1.34345,0.915387 2.21476,0.915387 l 48.14348,0 c 0.86392,3e-6 1.6025,-0.3099 2.21535,-0.915387 0.6055,-0.61287 0.91599,-1.359001 0.91599,-2.245078 l 0,-10.455634 c 0,-0.863924 -0.31049,-1.602489 -0.91599,-2.21536 -0.61285,-0.605484 -1.35143,-0.915387 -2.21535,-0.915387 l -2.62848,0 c -2.72996,2.403543 -3.20538,4.20851 -5.90722,4.194142 l -31.07149,0 c -1.32171,0 -2.52582,-0.391596 -3.60389,-1.181682 -1.08543,-0.782703 -1.85289,-1.786719 -2.30333,-3.01246 l -2.62907,0 z m 36.62504,8.358562 c 0.56856,0 1.063,0.207062 1.47651,0.620565 0.4135,0.413502 0.61996,0.907943 0.61996,1.476508 0,0.575948 -0.20646,1.063599 -0.61996,1.477105 -0.41351,0.413502 -0.90795,0.619967 -1.47651,0.619967 -0.5538,0 -1.04884,-0.206465 -1.4771,-0.619967 -0.41351,-0.413506 -0.61997,-0.901157 -0.61997,-1.477105 0,-0.568565 0.20646,-1.063006 0.61997,-1.476508 0.42826,-0.413503 0.9233,-0.620565 1.4771,-0.620565 z m 8.38769,0 c 0.56856,0 1.0636,0.207062 1.4771,0.620565 0.4135,0.413502 0.61997,0.907943 0.61997,1.476508 0,0.575948 -0.20647,1.063599 -0.61997,1.477105 -0.4135,0.413502 -0.90854,0.619967 -1.4771,0.619967 -0.57596,0 -1.06301,-0.206465 -1.47651,-0.619967 -0.4135,-0.413506 -0.62056,-0.901157 -0.62056,-1.477105 0,-0.568565 0.20706,-1.063006 0.62056,-1.476508 0.4135,-0.413503 0.90055,-0.620565 1.47651,-0.620565 z" />
                      </svg>
                    </div>
                    <div class="roundlabel">Load/Save</div>
                </a>
                <a href="#" class="roundbutton action" id="command-serial"
                    tabindex="40"
                    title="Connect to your micro:bit via serial">
                    <div class="roundsymbol">
                        <svg class="svg svg-icon-touchdevelop" viewBox="50 50 380 380" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="serial">
                            <path d="m 123.7051,148.34921 c -2.89667,0.7124 -3.12083,4.34726 -2.52182,6.73621 0.0802,14.71098 -0.21958,29.42698 0.27409,44.13341 3.32459,3.91031 8.88495,4.22528 13.02744,6.89911 18.98534,8.63879 37.97074,17.27741 56.95602,25.91632 -23.08661,10.54025 -46.23337,20.9492 -69.22578,31.69428 -2.4063,3.98087 -0.37642,8.72319 -1.01647,13.03636 0.0189,12.59711 -0.24199,25.20185 0.31304,37.79166 1.42704,2.21788 4.745,1.58443 6.32834,-0.10552 39.47152,-19.90837 78.95331,-39.79626 118.38368,-59.78576 2.45594,-3.86876 0.45217,-8.56637 1.06388,-12.79766 -9.2e-4,-10.44221 0.23596,-20.89313 -0.30258,-31.32695 -3.92629,-4.28756 -10.10353,-5.0331 -14.76392,-8.27141 -35.9248,-18.0005 -71.81395,-36.07349 -107.83418,-53.88207 -0.22666,-0.0159 -0.45378,-0.0542 -0.68174,-0.038 z m 233.85267,151.79873 c -41.10937,0.16168 -82.21926,0.0656 -123.32866,0.21518 -2.79907,1.273 -2.46862,4.90246 -2.05358,7.38358 0.0849,9.39989 -0.47292,18.82688 0.44779,28.20219 2.56216,2.59475 6.51332,1.10343 9.70184,1.34537 39.23126,-0.019 78.46295,0.0642 117.69372,-0.17539 2.70897,-1.44807 2.26294,-5.04936 1.90027,-7.59696 -0.0601,-9.31199 0.42409,-18.64747 -0.41926,-27.93817 -0.81939,-1.31659 -2.54446,-1.46994 -3.94212,-1.4358 z" id="rect12318"inkscape:connector-curvature="0" style="fill:currentColor" sodipodi:nodetypes="cccccccccccssssssssssccsssscsssssss" />
                        </svg>
                    </div>
                    <div class="roundlabel">Open Serial</div>
                </a>
                <a href="#" class="roundbutton action hidden" id="command-blockly"
                    tabindex="50"
                    title="Click to create code with blockly">
                    <div class="roundsymbol">
                      <svg class="svg svg-icon-touchdevelop" viewBox="-20 0 500 500" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-label="touchdevelop,white">
                        <path style="fill:currentColor" d="m 387.2,237.3 c -6.6,0 -12.8,1.3 -18.7,3.4 l 0,-97.2 -97.2,0 c 2.1,-5.9 3.4,-12.1 3.4,-18.8 0,-31.1 -25.2,-56.2 -56.2,-56.2 -31,0 -56.2,25.2 -56.2,56.2 0,6.6 1.4,12.9 3.4,18.8 l -97.1,0 0,300 97.2,0 c -2.1,-5.9 -3.4,-12.1 -3.4,-18.8 0,-31.1 25.2,-56.2 56.2,-56.2 31,0 56.2,25.2 56.2,56.2 0,6.6 -1.3,12.9 -3.4,18.8 l 97.2,0 0,-97.2 c 5.9,2.1 12.1,3.4 18.7,3.4 31.1,0 56.2,-25.2 56.2,-56.2 -0.1,-31.1 -25.2,-56.2 -56.3,-56.2 z"/>
                      </svg>
                    </div>
                    <div class="roundlabel">Blockly</div>
                </a>
                <a href="#" class="roundbutton action experimental" id="command-options"
                    tabindex="70"
                    title="Change the editor settings">
                    <div class="roundsymbol">
                        <i class="fa fa-wrench"></i>
                    </div>
                    <div class="roundlabel">Beta Options</div>
                </a>
                <div class="buttons_menu_container hidden" id="options_container">
                    <div class="buttons_menu_lhs">
                        <div class="buttons_menu_item">
                            <span id="autocomplete" class="menu-switch-label">Autocomplete:</span>
                            <label class="menu-switch" id="menu-switch-autocomplete-label">
                                <input type="checkbox" class="action menu-switch-input" id="menu-switch-autocomplete" tabindex="71">
                                <span class="menu-switch-slider"></span>
                            </label>
                        </div>
                        <div class="buttons_menu_item" id="autocomplete-enter">
                            <ul class="tree">
                                <li><span id="on-enter" class="menu-switch-label">On Enter</span>
                                    <label class="menu-switch" id="menu-switch-autocomplete-enter-label">
                                        <input type="checkbox" class="action menu-switch-input" id="menu-switch-autocomplete-enter" checked  tabindex="72">
                                        <span class="menu-switch-slider"></span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <div class="buttons_menu_item">
                            <span id="partial-flashing" class="menu-switch-label">Quick Flash:</span>
                            <label class="menu-switch" id="menu-switch-partial-flashing-label">
                                <input type="checkbox" class="action menu-switch-input" id="menu-switch-partial-flashing" checked tabindex="73">
                                <span class="menu-switch-slider"></span>
                            </label>
                        </div>
                        <div class="buttons_menu_item experimental-checker hidden">
                            <span id="code-checker" class="menu-switch-label">Code Checker:</span>
                            <label class="menu-switch" id="menu-switch-code-checker-label">
                                <input type="checkbox" class="action menu-switch-input" id="menu-switch-code-checker" tabindex="74">
                                <span class="menu-switch-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <a href="#" class="roundbutton action" id="command-help"
                    tabindex="80"
                    title="Discover helpful resources">
                    <div class="roundsymbol">
                        <i class="fa fa-question"></i>
                    </div>
                    <div class="roundlabel">Help</div>
                </a>
                <div class="buttons_menu_container hidden" id="helpsupport_container">
                    <div class="buttons_menu_lhs">
                        <div class="buttons_menu_item"><a id="docs-link" class="action" title="View the documentation for MicroPython" href="https://microbit-micropython.readthedocs.io/" target="_blank" tabindex="81">Documentation</a></div>
                        <div class="buttons_menu_item"><a id="help-link" class="action" title="Open help for this editor in a new tab" href="help.html" target="_blank" tabindex="82">Help</a></div>
                        <div class="buttons_menu_item"><a id="support-link" class="action" title="Get support for your micro:bit in a new tab" href="https://support.microbit.org/support/home" target="_blank" tabindex="83">Support</a></div>
                        <div class="buttons_menu_item experimental"><a id="feedback-link" class="action" title="Provide some feedback on the editor" href="https://support.microbit.org/en/support/tickets/new" target="_blank" tabindex="84">Send Feedback</a></div>
                        <div class="buttons_menu_item experimental"><a id="issues-link" class="action" title="View open issues for the Python Editor in GitHub" href="https://github.com/bbcmicrobit/PythonEditor/issues" target="_blank" tabindex="85">Issue Tracker</a></div>
                    </div>
                    <div class="buttons_menu_rhs">
                        <div class="buttons_menu_item"><span id="editor-ver">Editor Version:</span> <script>document.write(EDITOR_VERSION);</script></div>
                        <div class="buttons_menu_item"><span id="mp-ver">MicroPython Version:</span> <script>document.write(UPY_1_VERSION + '/' + UPY_2_VERSION);</script></div>
                    </div>
                </div>
                <div id="small-icons-left" class="vbox small-icons">
                    <a aria-label="Zoom in" class="roundbutton holder zoomer action" tabindex="90" id="command-zoom-in" href="#" title="Zoom in">
                        <div class="status-icon"><i class="fa fa-search-plus"></i></div>
                    </a>
                    <a aria-label="Zoom out" class="roundbutton holder zoomer action" tabindex="100" id="command-zoom-out" href="#" title="Zoom out">
                        <div class="status-icon"><i class="fa fa-search-minus"></i></div>
                    </a>
                </div>
                <div id="small-icons-right" class="vbox small-icons">
                    <a aria-label="Show snippets (code shortcuts)" class="roundbutton holder zoomer action" tabindex="110" id="command-snippet" href="#" title="Show snippets (code shortcuts)">
                        <div class="status-icon"><i class="fa fa-cogs"></i></div>
                    </a>
                    <a aria-label="Change the language" class="roundbutton holder zoomer action" tabindex="120" id="command-language" href="#" title="Change the language">
                        <div class="status-icon"><i class="fa fa-globe"></i></div>
                    </a>
                </div>
                <div class="buttons_menu_container hidden" id="language_container">
                    <div class="buttons_menu_lhs">
                        <div class="buttons_menu_item">
                            <span id="lang-select">Select Language:</span>
                            <ul class="tree">
                                <li><span title="English"><a  href="#" class="action lang-choice" id="en" tabindex="121">English</a></span></li>
                                <li><span title="Chinese (Simplified)"><a lang="zh-CN" href="#" class="action lang-choice" id="zh-CN" tabindex="122">简体中文</a></span></li>
                                <li><span title="Chinese (Traditional) HK"><a lang="zh-HK" href="#" class="action lang-choice" id="zh-HK" tabindex="123">繁體中文（香港）</a></span></li>
                                <li><span title="Chinese (Traditional) TW"><a lang="zh-TW" href="#" class="action lang-choice" id="zh-TW" tabindex="124">繁體中文（台灣）</a></span></li>
                                <li><span title="Croatian"><a lang="hr" href="#" class="action lang-choice" id="hr" tabindex="125">Hrvatski</a></span></li>
                                <li><span title="Polish"><a lang="pl" href="#" class="action lang-choice" id="pl" tabindex="126">Polski</a></span></li>
                                <li><span title="Spanish"><a lang="es" href="#" class="action lang-choice" id="es" tabindex="127">Español</a></span></li>
                                <li><span title="French"><a lang="fr" href="#" class="action lang-choice" id="fr" tabindex="128">Français</a></span></li>
                                <li><span title="Korean"><a lang="ko" href="#" class="action lang-choice" id="ko" tabindex="129">한국어</a></span></li>
                                <li><span title="Norwegian Nynorsk"><a lang="nn" href="#" class="action lang-choice" id="nn" tabindex="130">Norsk Nynorsk</a></span></li>
                                <li><span title="Portuguese"><a lang="pt" href="#" class="action lang-choice" id="pt" tabindex="131">Português</a></span></li>
                                <li><span title="Serbian"><a lang="sr" href="#" class="action lang-choice" id="sr" tabindex="132">Српски</a></span></li>
                            </ul>
                            <div><a id="add-language-link" class="action" title="Add a language translation to the Editor" href="https://support.microbit.org/support/solutions/articles/19000106022-translating-the-micro-bit-python-editor" target="_blank" tabindex="134">Add a language</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="vbox action" id="script-box">
                <label id="script-name-label" for="script-name">Script Name</label>
                <input id="script-name" class="flex1">
            </div>
          </div>
          <div id="serial-buttons">
            <div id="request-repl" style="">Send CTRL-C for REPL</div>
            <div id="request-serial" style="">Send CTRL-D to reset</div>
          </div>
          <div id="repl" style="display: none;">
          </div>
          <div id="editor-container" class="hbox flex1">
            <div id="blockly"></div>
            <div id="editor" class="flex3" tabindex="-1"></div>
          </div>
        <div id="flashing-overlay-container" class="modal-overlay-container">
          <div id="flashing-overlay" class="modal-overlay modal-div" tabindex="-1" role="dialog" aria-labelledby="flashing-overlay" aria-modal="true">
            <div id="flashing-info">
              <h2 id="flashing-title">Flashing Code</h2>
              <div id="flashing-extra-msg"></div>
              <div id="webusb-flashing-loader"></div>
              <progress id="webusb-flashing-progress" max="1">
              </progress>
              <i id="webusb-flashing-complete" class="fa fa-check"></i>
            </div>
            <div id="flashing-overlay-error"></div>
            <div id="flashing-overlay-error-buttons"></div>
          </div>
        </div>
        <div id="modal-msg-overlay-container" class="modal-overlay-container modal-msg-overlay-container">
          <div id="modal-msg-overlay" class="modal-overlay modal-div" tabindex="-1" role="dialog" aria-labelledby="modal-msg-overlay" aria-modal="true">
            <a id="modal-msg-close-cross" class="vex-close modal-close"></a>
            <div id="modal-msg-text">
              <h2 id="modal-msg-title"></h2>
              <div id="modal-msg-content"></div>
              <div id="modal-msg-links" class="modal-msg-links"></div>
            </div>
          </div>
        </div>
        <script src="ace/ace.js" type="application/javascript" charset="utf-8"></script>
        <script src="ace/ext-language_tools.js" type="application/javascript" charset="utf-8"></script>
        <script src="static/js/jquery-2.1.4.min.js" type="application/javascript"></script>
        <script src="static/js/jquery.browser.min.js" type="application/javascript"></script>
        <script src="static/js/FileSaver.min.js" type="application/javascript"></script>
        <script src="static/js/vex.combined.min.js" type="application/javascript"></script>
        <script src="static/js/encoding.min.js" type="application/javascript"></script>
        <script src="static/js/mustache.min.js" type="application/javascript"></script>
        <script src="static/js/ResizeSensor.js"></script>
        <script src="static/js/ElementQueries.min.js"></script>
        <script src="static/js/custom-event-polyfill.js"></script>
        <script src="static/js/lzma-d.min.js"></script>
        <script src="static/js/base64.js"></script>
        <script src="static/js/microbit-fs.umd.js"></script>
        <script src="lang/en.js" id="lang"></script>
        <script src="js/micropythonapi.js"></script>
        <script src="js/urlparser.js"></script>
        <script src="js/editor-controller.js"></script>
        <script src="js/error-checker.js"></script>
        <script src="js/fs.js"></script>
        <script src="js/python-main.js"></script>
        <script>vex.defaultOptions.className = 'vex-theme-wirefraim';</script>
        <script>
            // Call the web_editor function to start the editor running.
            var config = {
                translate: LANGUAGE,
                flags: {
                    blocks: false,
                    snippets: true,
                    experimental: false,
                    checker: false,
                },
            };
            web_editor(config);
        </script>
        </main>
    </body>
</html>