SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 .clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:16px}.clr-picker input[type=range]::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:16px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input[type=range],.clr-hue input[type=range]{position:absolute;width:calc(100% + 32px);height:16px;left:-16px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px auto}.clr-polaroid .clr-clear{margin:0 10px 15px 10px}.clr-polaroid .clr-close{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px}6 7 8/*************************************************************************************************/9/* General */10/*************************************************************************************************/11 12#dispatcher {13 width: 0;14 height: 0;15 position: absolute;16 top: 0;17 left: 0;18}19 20body.waiting,21body.waiting * {22 cursor: wait !important;23}24 25body,26html {27 margin: 0;28 padding: 0;29 height: 100%;30 font-family: Roboto, sans-serif;31 font-size: 12pt;32}33 34button {35 border: none;36 background: none;37 cursor: pointer;38 font-size: 12pt;39 transition: color 0.3s ease;40}41 42button:hover {43 color: #007bff;44}45 46 47 48 49/*************************************************************************************************/50/* Layout */51/*************************************************************************************************/52 53.container {54 display: flex;55 height: 100vh;56 overflow: hidden;57}58 59.panel {60 padding: 10px;61 border: 1px solid #ccc;62 overflow: hidden;63}64 65.left-panel {66 display: block;67 width: 250px;68 flex-shrink: 0;69}70 71.middle-panel,72.right-panel {73 flex-grow: 1;74 width: 50%;75}76 77.right-panel {78 display: flex;79 flex-direction: column;80}81 82.subpanel {83 padding: 10px 0;84 flex-grow: 1;85}86 87.right-panel .subpanel {88 display: flex;89 justify-content: center;90 align-items: center;91}92 93 94/*************************************************************************************************/95/* Hamburger menu */96/*************************************************************************************************/97 98.hamburger-menu {99 cursor: pointer;100 padding: 10px;101 background: white;102}103 104.bar {105 width: 25px;106 height: 3px;107 background-color: #333;108 margin: 5px 0;109}110 111/* Collapse left panel on mobile devices */112@media (max-width: 768px) {113 .left-panel {114 display: none;115 }116}117 118/* #new-item {119 border: 0;120} */121 122 123/*************************************************************************************************/124/* Selector */125/*************************************************************************************************/126 127.item {128 display: flex;129 align-items: center;130 justify-content: space-between;131 height: 30px;132 border: 1px solid #aaa;133 padding: 10px;134 margin-bottom: 5px;135 cursor: pointer;136}137 138.item span {139 flex: 1;140 /* Text takes as much space as possible */141}142 143.item:hover {144 background-color: #eee;145}146 147.item button {148 background: none;149 border: none;150 cursor: pointer;151 margin-left: auto;152}153 154.item.selected {155 border-left: 5px solid black;156 background-color: #f7f7f7;157}158 159.item:hover {160 background-color: #eee;161}162 163.icon {164 margin-right: 10px;165}166 167 168/*************************************************************************************************/169/* Top buttons */170/*************************************************************************************************/171 172#buttons-bar {173 position: relative;174 margin-bottom: 10px;175}176 177#emoji-button {178 text-decoration: none;179 font-size: 14pt;180}181 182emoji-picker {183 display: none;184 position: absolute;185 left: 0;186 right: 0;187 z-index: 100;188}189 190emoji-picker.visible {191 display: block;192}193 194#color-button {195 width: 150px;196}197 198 199/*************************************************************************************************/200/* Code editor */201/*************************************************************************************************/202 203#code-editor {204 height: calc(100% - 30px);205}206 207 208/*************************************************************************************************/209/* Terminal output */210/*************************************************************************************************/211 212#terminal-output {213 font-family: monospace;214 resize: none;215}216 217#terminal-output.error {218 background-color: #dc7373;219}220 221 222/*************************************************************************************************/223/* Grid */224/*************************************************************************************************/225 226#grid {227 width: 30vmin;228 display: flex;229 justify-content: center;230 overflow: hidden;231}232 233#grid-table {234 display: grid;235 grid-template-columns: repeat(3, 1fr);236 width: 100%;237 height: 100%;238}239 240#grid #grid-table>div {241 display: flex;242 justify-content: center;243 align-items: center;244 overflow: hidden;245 white-space: nowrap;246 text-overflow: ellipsis;247 border: 0.5px solid #ddd;248 aspect-ratio: 1/1;249 cursor: pointer;250}251 252#grid #grid-table>div>* {253 margin: 10px;254 text-overflow: ellipsis;255 overflow: hidden;256}257 258 259/*************************************************************************************************/260/* Control panel */261/*************************************************************************************************/262 263.control-panel {264 height: 30px;265 max-height: 30px;266 overflow: hidden;267}268 269.control-panel {270 display: flex;271 justify-content: space-between;272 align-items: center;273}274 275.control-panel button#run-button {276 font-size: 20pt;277}278 279 280/*************************************************************************************************/281/* Confidentiality */282/*************************************************************************************************/283 284#confidentiality {285 font-size: 9pt;286 color: #999;287 padding: 0;288 margin: 0;289 display: block;290 max-height: 45px;291 overflow: hidden;292}293 294 295/*************************************************************************************************/296/* Credits */297/*************************************************************************************************/298 299#credits,300#credits * {301 color: #999;302 font-size: 9pt;303 max-height: 30px;304 padding: 0;305 margin: 0;306}307 308#credits {309 /* flex-direction: column; */310}311 312#credits p {313 padding: 2px 0;314}315 316 317 .error_widget_wrapper { background: inherit; color: inherit; border:none } .error_widget { border-top: solid 2px; border-bottom: solid 2px; margin: 5px 0; padding: 10px 40px; white-space: pre-wrap; } .error_widget.ace_error, .error_widget_arrow.ace_error{ border-color: #ff5a5a } .error_widget.ace_warning, .error_widget_arrow.ace_warning{ border-color: #F1D817 } .error_widget.ace_info, .error_widget_arrow.ace_info{ border-color: #5a5a5a } .error_widget.ace_ok, .error_widget_arrow.ace_ok{ border-color: #5aaa5a } .error_widget_arrow { position: absolute; border: solid 5px; border-top-color: transparent!important; border-right-color: transparent!important; border-left-color: transparent!important; top: -5px; }318 </style>319 <style id="ace-tm">320 .ace-tm .ace_gutter {background: #f0f0f0;color: #333;}.ace-tm .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-tm .ace_fold {background-color: #6B72E6;}.ace-tm {background-color: #FFFFFF;color: black;}.ace-tm .ace_cursor {color: black;}.ace-tm .ace_invisible {color: rgb(191, 191, 191);}.ace-tm .ace_storage,.ace-tm .ace_keyword {color: blue;}.ace-tm .ace_constant {color: rgb(197, 6, 11);}.ace-tm .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-tm .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-tm .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-tm .ace_invalid {background-color: rgba(255, 0, 0, 0.1);color: red;}.ace-tm .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-tm .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {color: rgb(109, 121, 222);}.ace-tm .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-tm .ace_string {color: rgb(3, 106, 7);}.ace-tm .ace_comment {color: rgb(76, 136, 107);}.ace-tm .ace_comment.ace_doc {color: rgb(0, 102, 255);}.ace-tm .ace_comment.ace_doc.ace_tag {color: rgb(128, 159, 191);}.ace-tm .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-tm .ace_variable {color: rgb(49, 132, 149);}.ace-tm .ace_xml-pe {color: rgb(104, 104, 91);}.ace-tm .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-tm .ace_heading {color: rgb(12, 7, 255);}.ace-tm .ace_list {color:rgb(185, 6, 144);}.ace-tm .ace_meta.ace_tag {color:rgb(0, 22, 142);}.ace-tm .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-tm .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-tm.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px white;}.ace-tm .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-tm .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-tm .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-tm .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-tm .ace_gutter-active-line {background-color : #dcdcdc;}.ace-tm .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-tm .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}321/*# sourceURL=ace/css/ace-tm */322 </style>323 <style id="ace_editor.css">324 .ace_br1 {border-top-left-radius : 3px;}.ace_br2 {border-top-right-radius : 3px;}.ace_br3 {border-top-left-radius : 3px; border-top-right-radius: 3px;}.ace_br4 {border-bottom-right-radius: 3px;}.ace_br5 {border-top-left-radius : 3px; border-bottom-right-radius: 3px;}.ace_br6 {border-top-right-radius : 3px; border-bottom-right-radius: 3px;}.ace_br7 {border-top-left-radius : 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}.ace_br8 {border-bottom-left-radius : 3px;}.ace_br9 {border-top-left-radius : 3px; border-bottom-left-radius: 3px;}.ace_br10{border-top-right-radius : 3px; border-bottom-left-radius: 3px;}.ace_br11{border-top-left-radius : 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br12{border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br13{border-top-left-radius : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br14{border-top-right-radius : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_br15{border-top-left-radius : 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}.ace_editor {position: relative;overflow: hidden;padding: 0;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;text-align: left;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.ace_scroller {position: absolute;overflow: hidden;top: 0;bottom: 0;background-color: inherit;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;cursor: text;}.ace_content {position: absolute;box-sizing: border-box;min-width: 100%;contain: style size layout;font-variant-ligatures: no-common-ligatures;}.ace_dragging .ace_scroller:before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';background: rgba(250, 250, 250, 0.01);z-index: 1000;}.ace_dragging.ace_dark .ace_scroller:before{background: rgba(0, 0, 0, 0.01);}.ace_selecting, .ace_selecting * {cursor: text !important;}.ace_gutter {position: absolute;overflow : hidden;width: auto;top: 0;bottom: 0;left: 0;cursor: default;z-index: 4;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;contain: style size layout;}.ace_gutter-active-line {position: absolute;left: 0;right: 0;}.ace_scroller.ace_scroll-left {box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;}.ace_gutter-cell {position: absolute;top: 0;left: 0;right: 0;padding-left: 19px;padding-right: 6px;background-repeat: no-repeat;}.ace_gutter-cell.ace_error {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABOFBMVEX/////////QRswFAb/Ui4wFAYwFAYwFAaWGAfDRymzOSH/PxswFAb/SiUwFAYwFAbUPRvjQiDllog5HhHdRybsTi3/Tyv9Tir+Syj/UC3////XurebMBIwFAb/RSHbPx/gUzfdwL3kzMivKBAwFAbbvbnhPx66NhowFAYwFAaZJg8wFAaxKBDZurf/RB6mMxb/SCMwFAYwFAbxQB3+RB4wFAb/Qhy4Oh+4QifbNRcwFAYwFAYwFAb/QRzdNhgwFAYwFAbav7v/Uy7oaE68MBK5LxLewr/r2NXewLswFAaxJw4wFAbkPRy2PyYwFAaxKhLm1tMwFAazPiQwFAaUGAb/QBrfOx3bvrv/VC/maE4wFAbRPBq6MRO8Qynew8Dp2tjfwb0wFAbx6eju5+by6uns4uH9/f36+vr/GkHjAAAAYnRSTlMAGt+64rnWu/bo8eAA4InH3+DwoN7j4eLi4xP99Nfg4+b+/u9B/eDs1MD1mO7+4PHg2MXa347g7vDizMLN4eG+Pv7i5evs/v79yu7S3/DV7/498Yv24eH+4ufQ3Ozu/v7+y13sRqwAAADLSURBVHjaZc/XDsFgGIBhtDrshlitmk2IrbHFqL2pvXf/+78DPokj7+Fz9qpU/9UXJIlhmPaTaQ6QPaz0mm+5gwkgovcV6GZzd5JtCQwgsxoHOvJO15kleRLAnMgHFIESUEPmawB9ngmelTtipwwfASilxOLyiV5UVUyVAfbG0cCPHig+GBkzAENHS0AstVF6bacZIOzgLmxsHbt2OecNgJC83JERmePUYq8ARGkJx6XtFsdddBQgZE2nPR6CICZhawjA4Fb/chv+399kfR+MMMDGOQAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: 2px center;}.ace_gutter-cell.ace_warning {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAmVBMVEX///8AAAD///8AAAAAAABPSzb/5sAAAAB/blH/73z/ulkAAAAAAAD85pkAAAAAAAACAgP/vGz/rkDerGbGrV7/pkQICAf////e0IsAAAD/oED/qTvhrnUAAAD/yHD/njcAAADuv2r/nz//oTj/p064oGf/zHAAAAA9Nir/tFIAAAD/tlTiuWf/tkIAAACynXEAAAAAAAAtIRW7zBpBAAAAM3RSTlMAABR1m7RXO8Ln31Z36zT+neXe5OzooRDfn+TZ4p3h2hTf4t3k3ucyrN1K5+Xaks52Sfs9CXgrAAAAjklEQVR42o3PbQ+CIBQFYEwboPhSYgoYunIqqLn6/z8uYdH8Vmdnu9vz4WwXgN/xTPRD2+sgOcZjsge/whXZgUaYYvT8QnuJaUrjrHUQreGczuEafQCO/SJTufTbroWsPgsllVhq3wJEk2jUSzX3CUEDJC84707djRc5MTAQxoLgupWRwW6UB5fS++NV8AbOZgnsC7BpEAAAAABJRU5ErkJggg==");background-position: 2px center;}.ace_gutter-cell.ace_info {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII=");background-position: 2px center;}.ace_dark .ace_gutter-cell.ace_info {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC");}.ace_scrollbar {contain: strict;position: absolute;right: 0;bottom: 0;z-index: 6;}.ace_scrollbar-inner {position: absolute;cursor: text;left: 0;top: 0;}.ace_scrollbar-v{overflow-x: hidden;overflow-y: scroll;top: 0;}.ace_scrollbar-h {overflow-x: scroll;overflow-y: hidden;left: 0;}.ace_print-margin {position: absolute;height: 100%;}.ace_text-input {position: absolute;z-index: 0;width: 0.5em;height: 1em;opacity: 0;background: transparent;-moz-appearance: none;appearance: none;border: none;resize: none;outline: none;overflow: hidden;font: inherit;padding: 0 1px;margin: 0 -1px;contain: strict;-ms-user-select: text;-moz-user-select: text;-webkit-user-select: text;user-select: text;white-space: pre!important;}.ace_text-input.ace_composition {background: transparent;color: inherit;z-index: 1000;opacity: 1;}.ace_composition_placeholder { color: transparent }.ace_composition_marker { border-bottom: 1px solid;position: absolute;border-radius: 0;margin-top: 1px;}[ace_nocontext=true] {transform: none!important;filter: none!important;clip-path: none!important;mask : none!important;contain: none!important;perspective: none!important;mix-blend-mode: initial!important;z-index: auto;}.ace_layer {z-index: 1;position: absolute;overflow: hidden;word-wrap: normal;white-space: pre;height: 100%;width: 100%;box-sizing: border-box;pointer-events: none;}.ace_gutter-layer {position: relative;width: auto;text-align: right;pointer-events: auto;height: 1000000px;contain: style size layout;}.ace_text-layer {font: inherit !important;position: absolute;height: 1000000px;width: 1000000px;contain: style size layout;}.ace_text-layer > .ace_line, .ace_text-layer > .ace_line_group {contain: style size layout;position: absolute;top: 0;left: 0;right: 0;}.ace_hidpi .ace_text-layer,.ace_hidpi .ace_gutter-layer,.ace_hidpi .ace_content,.ace_hidpi .ace_gutter {contain: strict;will-change: transform;}.ace_hidpi .ace_text-layer > .ace_line, .ace_hidpi .ace_text-layer > .ace_line_group {contain: strict;}.ace_cjk {display: inline-block;text-align: center;}.ace_cursor-layer {z-index: 4;}.ace_cursor {z-index: 4;position: absolute;box-sizing: border-box;border-left: 2px solid;transform: translatez(0);}.ace_multiselect .ace_cursor {border-left-width: 1px;}.ace_slim-cursors .ace_cursor {border-left-width: 1px;}.ace_overwrite-cursors .ace_cursor {border-left-width: 0;border-bottom: 1px solid;}.ace_hidden-cursors .ace_cursor {opacity: 0.2;}.ace_hasPlaceholder .ace_hidden-cursors .ace_cursor {opacity: 0;}.ace_smooth-blinking .ace_cursor {transition: opacity 0.18s;}.ace_animate-blinking .ace_cursor {animation-duration: 1000ms;animation-timing-function: step-end;animation-name: blink-ace-animate;animation-iteration-count: infinite;}.ace_animate-blinking.ace_smooth-blinking .ace_cursor {animation-duration: 1000ms;animation-timing-function: ease-in-out;animation-name: blink-ace-animate-smooth;}@keyframes blink-ace-animate {from, to { opacity: 1; }60% { opacity: 0; }}@keyframes blink-ace-animate-smooth {from, to { opacity: 1; }45% { opacity: 1; }60% { opacity: 0; }85% { opacity: 0; }}.ace_marker-layer .ace_step, .ace_marker-layer .ace_stack {position: absolute;z-index: 3;}.ace_marker-layer .ace_selection {position: absolute;z-index: 5;}.ace_marker-layer .ace_bracket {position: absolute;z-index: 6;}.ace_marker-layer .ace_error_bracket {position: absolute;border-bottom: 1px solid #DE5555;border-radius: 0;}.ace_marker-layer .ace_active-line {position: absolute;z-index: 2;}.ace_marker-layer .ace_selected-word {position: absolute;z-index: 4;box-sizing: border-box;}.ace_line .ace_fold {box-sizing: border-box;display: inline-block;height: 11px;margin-top: -2px;vertical-align: middle;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACJJREFUeNpi+P//fxgTAwPDBxDxD078RSX+YeEyDFMCIMAAI3INmXiwf2YAAAAASUVORK5CYII=");background-repeat: no-repeat, repeat-x;background-position: center center, top left;color: transparent;border: 1px solid black;border-radius: 2px;cursor: pointer;pointer-events: auto;}.ace_dark .ace_fold {}.ace_fold:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpi+P//fz4TAwPDZxDxD5X4i5fLMEwJgAADAEPVDbjNw87ZAAAAAElFTkSuQmCC");}.ace_tooltip {background-color: #FFF;background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));border: 1px solid gray;border-radius: 1px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: black;max-width: 100%;padding: 3px 4px;position: fixed;z-index: 999999;box-sizing: border-box;cursor: default;white-space: pre;word-wrap: break-word;line-height: normal;font-style: normal;font-weight: normal;letter-spacing: normal;pointer-events: none;}.ace_folding-enabled > .ace_gutter-cell {padding-right: 13px;}.ace_fold-widget {box-sizing: border-box;margin: 0 -12px 0 1px;display: none;width: 11px;vertical-align: top;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: center;border-radius: 3px;border: 1px solid transparent;cursor: pointer;}.ace_folding-enabled .ace_fold-widget {display: inline-block; }.ace_fold-widget.ace_end {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42m3HwQkAMAhD0YzsRchFKI7sAikeWkrxwScEB0nh5e7KTPWimZki4tYfVbX+MNl4pyZXejUO1QAAAABJRU5ErkJggg==");}.ace_fold-widget.ace_closed {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAOUlEQVR42jXKwQkAMAgDwKwqKD4EwQ26sSOkVWjgIIHAzPiCgaqiqnJHZnKICBERHN194O5b9vbLuAVRL+l0YWnZAAAAAElFTkSuQmCCXA==");}.ace_fold-widget:hover {border: 1px solid rgba(0, 0, 0, 0.3);background-color: rgba(255, 255, 255, 0.2);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);}.ace_fold-widget:active {border: 1px solid rgba(0, 0, 0, 0.4);background-color: rgba(0, 0, 0, 0.05);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);}.ace_dark .ace_fold-widget {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2P4//8/AzoGEQ7oGCaLLAhWiSwB146BAQCSTPYocqT0AAAAAElFTkSuQmCC");}.ace_dark .ace_fold-widget.ace_end {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAH0lEQVQIW2P4//8/AxQ7wNjIAjDMgC4AxjCVKBirIAAF0kz2rlhxpAAAAABJRU5ErkJggg==");}.ace_dark .ace_fold-widget.ace_closed {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAHElEQVQIW2P4//+/AxAzgDADlOOAznHAKgPWAwARji8UIDTfQQAAAABJRU5ErkJggg==");}.ace_dark .ace_fold-widget:hover {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);background-color: rgba(255, 255, 255, 0.1);}.ace_dark .ace_fold-widget:active {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);}.ace_inline_button {border: 1px solid lightgray;display: inline-block;margin: -1px 8px;padding: 0 5px;pointer-events: auto;cursor: pointer;}.ace_inline_button:hover {border-color: gray;background: rgba(200,200,200,0.2);display: inline-block;pointer-events: auto;}.ace_fold-widget.ace_invalid {background-color: #FFB4B4;border-color: #DE5555;}.ace_fade-fold-widgets .ace_fold-widget {transition: opacity 0.4s ease 0.05s;opacity: 0;}.ace_fade-fold-widgets:hover .ace_fold-widget {transition: opacity 0.05s ease 0.05s;opacity:1;}.ace_underline {text-decoration: underline;}.ace_bold {font-weight: bold;}.ace_nobold .ace_bold {font-weight: normal;}.ace_italic {font-style: italic;}.ace_error-marker {background-color: rgba(255, 0, 0,0.2);position: absolute;z-index: 9;}.ace_highlight-marker {background-color: rgba(255, 255, 0,0.2);position: absolute;z-index: 8;}.ace_mobile-menu {position: absolute;line-height: 1.5;border-radius: 4px;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;background: white;box-shadow: 1px 3px 2px grey;border: 1px solid #dcdcdc;color: black;}.ace_dark > .ace_mobile-menu {background: #333;color: #ccc;box-shadow: 1px 3px 2px grey;border: 1px solid #444;}.ace_mobile-button {padding: 2px;cursor: pointer;overflow: hidden;}.ace_mobile-button:hover {background-color: #eee;opacity:1;}.ace_mobile-button:active {background-color: #ddd;}.ace_placeholder {font-family: arial;transform: scale(0.9);transform-origin: left;white-space: pre;opacity: 0.7;margin: 0 10px;}325/*# sourceURL=ace/css/ace_editor.css */326 </style>327 <meta charset="utf-8">328 <meta content="width=device-width, initial-scale=1.0" name="viewport">329 <title>330 PyKidos331 </title>332 <!-- ACE EDITOR -->333 <!-- PYODIDE -->334 <!-- PAKO -->335 <!-- EMOJI PICKER -->336 <!-- COLOR PICKER -->337 <!-- CUSTOM STYLES -->338 <!-- CUSTOM SCRIPT -->339 </head>340 <body class="">341 <div id="dispatcher">342 </div>343 <div class="container">344 <!-- HAMBURGER BUTTON -->345 <div class="hamburger-menu" id="menu-toggle">346 <div class="bar">347 </div>348 <div class="bar">349 </div>350 <div class="bar">351 </div>352 </div>353 <!-- LEFT PANEL -->354 <div class="panel left-panel">355 <!-- NEW BUTTON -->356 <div class="item" id="new-item">357 New358 </div>359 <!-- SELECTOR -->360 <div id="selector">361 <div class="item selected">362 <span>363 0. ๐ Tutorial364 </span>365 <button>366 โ๏ธ367 </button>368 <button>369 ๐๏ธ370 </button>371 </div>372 <div class="item">373 <span>374 1. ๐ณ Chessboard375 </span>376 <button>377 โ๏ธ378 </button>379 <button>380 ๐๏ธ381 </button>382 </div>383 <div class="item">384 <span>385 2. ๐ด Disc386 </span>387 <button>388 โ๏ธ389 </button>390 <button>391 ๐๏ธ392 </button>393 </div>394 <div class="item">395 <span>396 3. โ๏ธ Tic-tac-toe397 </span>398 <button>399 โ๏ธ400 </button>401 <button>402 ๐๏ธ403 </button>404 </div>405 <div class="item">406 <span>407 4. ๐งฌ Game of Life408 </span>409 <button>410 โ๏ธ411 </button>412 <button>413 ๐๏ธ414 </button>415 </div>416 <div class="item">417 <span>418 5. ๐ฐ Bunny419 </span>420 <button>421 โ๏ธ422 </button>423 <button>424 ๐๏ธ425 </button>426 </div>427 </div>428 </div>429 <!-- MIDDLE PANEL -->430 <div class="panel middle-panel">431 <!-- BUTTONS BAR -->432 <div id="buttons-bar">433 <!-- EMOJI BUTTON -->434 Emoji435 <a id="emoji-button">436 ๐437 </a>438 —439 <!-- COLOR PICKER BUTTON -->440 Color441 <div class="clr-field" style="color: rgb(0, 0, 0);">442 <button aria-labelledby="clr-open-label" type="button">443 </button>444 <input data-coloris id="color-button" type="text" value="rgb(0,0,0)">445 </div>446 —447 <button id="decrease-font-size-button" title="Decrease editor's font size">448 ๐449 </button>450 <button id="increase-font-size-button" title="Increase editor's font size">451 ๐452 </button>453 <!-- EMOJI PICKER POPUP -->454 <emoji-picker class="light" id="emoji-picker">455 </emoji-picker>456 </div>457 <!-- CODE EDITOR -->458 <div class="ace_editor ace_hidpi ace-tm" id="code-editor">459 <textarea autocapitalize="off" autocorrect="off" class="ace_text-input" spellcheck="false" style="opacity: 0; font-size: 1px; transform: translate(0px, 0px);" wrap="off"></textarea>460 <div aria-hidden="true" class="ace_gutter" style="left: 0px; width: 48px;">461 <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="height: 1e+06px; transform: translate(0px, 0px); width: 48px;">462 <div class="ace_gutter-cell" style="height: 14px; top: 0px;">463 1464 <span style="display: none;">465 </span>466 </div>467 <div class="ace_gutter-cell" style="height: 14px; top: 14px;">468 2469 <span style="display: none;">470 </span>471 </div>472 <div class="ace_gutter-cell" style="height: 14px; top: 28px;">473 3474 <span style="display: none;">475 </span>476 </div>477 <div class="ace_gutter-cell" style="height: 14px; top: 42px;">478 4479 <span style="display: none;">480 </span>481 </div>482 <div class="ace_gutter-cell" style="height: 14px; top: 56px;">483 5484 <span style="display: none;">485 </span>486 </div>487 <div class="ace_gutter-cell" style="height: 14px; top: 70px;">488 6489 <span style="display: none;">490 </span>491 </div>492 <div class="ace_gutter-cell" style="height: 14px; top: 84px;">493 7494 <span style="display: none;">495 </span>496 </div>497 <div class="ace_gutter-cell" style="height: 14px; top: 98px;">498 8499 <span style="display: none;">500 </span>501 </div>502 <div class="ace_gutter-cell" style="height: 14px; top: 112px;">503 9504 <span style="display: none;">505 </span>506 </div>507 <div class="ace_gutter-cell" style="height: 14px; top: 126px;">508 10509 <span style="display: none;">510 </span>511 </div>512 <div class="ace_gutter-cell" style="height: 14px; top: 140px;">513 11514 <span style="display: none;">515 </span>516 </div>517 <div class="ace_gutter-cell" style="height: 14px; top: 154px;">518 12519 <span style="display: none;">520 </span>521 </div>522 <div class="ace_gutter-cell" style="height: 14px; top: 168px;">523 13524 <span style="display: none;">525 </span>526 </div>527 <div class="ace_gutter-cell" style="height: 14px; top: 182px;">528 14529 <span style="display: none;">530 </span>531 </div>532 <div class="ace_gutter-cell" style="height: 14px; top: 196px;">533 15534 <span style="display: none;">535 </span>536 </div>537 <div class="ace_gutter-cell" style="height: 14px; top: 210px;">538 16539 <span style="display: none;">540 </span>541 </div>542 <div class="ace_gutter-cell" style="height: 14px; top: 224px;">543 17544 <span style="display: none;">545 </span>546 </div>547 <div class="ace_gutter-cell" style="height: 14px; top: 238px;">548 18549 <span style="display: none;">550 </span>551 </div>552 <div class="ace_gutter-cell" style="height: 14px; top: 252px;">553 19554 <span style="display: none;">555 </span>556 </div>557 <div class="ace_gutter-cell" style="height: 14px; top: 266px;">558 20559 <span style="display: none;">560 </span>561 </div>562 <div class="ace_gutter-cell" style="height: 14px; top: 280px;">563 21564 <span style="display: none;">565 </span>566 </div>567 <div class="ace_gutter-cell" style="height: 14px; top: 294px;">568 22569 <span style="display: none;">570 </span>571 </div>572 <div class="ace_gutter-cell" style="height: 14px; top: 308px;">573 23574 <span style="display: none;">575 </span>576 </div>577 <div class="ace_gutter-cell" style="height: 14px; top: 322px;">578 24579 <span style="display: none;">580 </span>581 </div>582 <div class="ace_gutter-cell" style="height: 14px; top: 336px;">583 25584 <span style="display: none;">585 </span>586 </div>587 <div class="ace_gutter-cell" style="height: 14px; top: 350px;">588 26589 <span style="display: none;">590 </span>591 </div>592 <div class="ace_gutter-cell" style="height: 14px; top: 364px;">593 27594 <span style="display: none;">595 </span>596 </div>597 <div class="ace_gutter-cell" style="height: 14px; top: 378px;">598 28599 <span style="display: none;">600 </span>601 </div>602 <div class="ace_gutter-cell" style="height: 14px; top: 392px;">603 29604 <span style="display: none;">605 </span>606 </div>607 <div class="ace_gutter-cell" style="height: 14px; top: 406px;">608 30609 <span style="display: none;">610 </span>611 </div>612 <div class="ace_gutter-cell" style="height: 14px; top: 420px;">613 31614 <span class="ace_fold-widget ace_start ace_open" style="display: inline-block; height: 14px;">615 </span>616 </div>617 <div class="ace_gutter-cell" style="height: 14px; top: 434px;">618 32619 <span style="display: none;">620 </span>621 </div>622 <div class="ace_gutter-cell" style="height: 14px; top: 448px;">623 33624 <span style="display: none;">625 </span>626 </div>627 <div class="ace_gutter-cell" style="height: 14px; top: 462px;">628 34629 <span style="display: none;">630 </span>631 </div>632 <div class="ace_gutter-cell" style="height: 14px; top: 476px;">633 35634 <span style="display: none;">635 </span>636 </div>637 <div class="ace_gutter-cell" style="height: 14px; top: 490px;">638 36639 <span style="display: none;">640 </span>641 </div>642 <div class="ace_gutter-cell" style="height: 14px; top: 504px;">643 37644 <span style="display: none;">645 </span>646 </div>647 <div class="ace_gutter-cell" style="height: 14px; top: 518px;">648 38649 <span style="display: none;">650 </span>651 </div>652 <div class="ace_gutter-cell" style="height: 14px; top: 532px;">653 39654 <span style="display: none;">655 </span>656 </div>657 <div class="ace_gutter-cell" style="height: 14px; top: 546px;">658 40659 <span class="ace_fold-widget ace_start ace_open" style="display: inline-block; height: 14px;">660 </span>661 </div>662 <div class="ace_gutter-cell" style="height: 14px; top: 560px;">663 41664 <span style="display: none;">665 </span>666 </div>667 <div class="ace_gutter-cell" style="height: 14px; top: 574px;">668 42669 <span style="display: none;">670 </span>671 </div>672 <div class="ace_gutter-cell" style="height: 14px; top: 588px;">673 43674 <span class="ace_fold-widget ace_start ace_open" style="display: inline-block; height: 14px;">675 </span>676 </div>677 <div class="ace_gutter-cell" style="height: 14px; top: 602px;">678 44679 <span style="display: none;">680 </span>681 </div>682 <div class="ace_gutter-cell" style="height: 14px; top: 616px;">683 45684 <span style="display: none;">685 </span>686 </div>687 <div class="ace_gutter-cell" style="height: 14px; top: 630px;">688 46689 <span class="ace_fold-widget ace_start ace_open" style="display: inline-block; height: 14px;">690 </span>691 </div>692 <div class="ace_gutter-cell" style="height: 14px; top: 644px;">693 47694 <span style="display: none;">695 </span>696 </div>697 <div class="ace_gutter-cell" style="height: 14px; top: 658px;">698 48699 <span style="display: none;">700 </span>701 </div>702 <div class="ace_gutter-cell" style="height: 14px; top: 672px;">703 49704 <span class="ace_fold-widget ace_start ace_open" style="display: inline-block; height: 14px;">705 </span>706 </div>707 </div>708 </div>709 <div class="ace_scroller" style="line-height: 14px; left: 47.4531px; right: 0px; bottom: 0px;">710 <div class="ace_content" style="transform: translate(0px, 0px); width: 586px; height: 696px;">711 <div class="ace_layer ace_print-margin-layer">712 <div class="ace_print-margin" style="left: 582px; visibility: visible;">713 </div>714 </div>715 <div class="ace_layer ace_marker-layer">716 </div>717 <div class="ace_layer ace_text-layer" style="height: 1e+06px; margin: 0px 4px; transform: translate(0px, 0px);">718 <div class="ace_line" style="height: 14px; top: 0px;">719 <span class="ace_string">720 """721 </span>722 </div>723 <div class="ace_line" style="height: 14px; top: 14px;">724 <span class="ace_string">725 Welcome to PyKidos! This is a small JavaScript application (still rough around726 </span>727 </div>728 <div class="ace_line" style="height: 14px; top: 28px;">729 <span class="ace_string">730 the edges) that provides a Python playground running entirely in the browser,731 </span>732 </div>733 <div class="ace_line" style="height: 14px; top: 42px;">734 <span class="ace_string">735 which is convenient for teaching purposes.736 </span>737 </div>738 <div class="ace_line" style="height: 14px; top: 56px;">739 </div>740 <div class="ace_line" style="height: 14px; top: 70px;">741 <span class="ace_string">742 The grid cells (color and text) on the right can be manipulated from Python.743 </span>744 </div>745 <div class="ace_line" style="height: 14px; top: 84px;">746 <span class="ace_string">747 You can make simple grid animations and react to click and keyboard events.748 </span>749 </div>750 <div class="ace_line" style="height: 14px; top: 98px;">751 </div>752 <div class="ace_line" style="height: 14px; top: 112px;">753 <span class="ace_string">754 Kids (and adults) can program toy games to learn basic Python coding skills.755 </span>756 </div>757 <div class="ace_line" style="height: 14px; top: 126px;">758 </div>759 <div class="ace_line" style="height: 14px; top: 140px;">760 <span class="ace_string">761 You have a few examples on the left, and you can create your own scripts for762 </span>763 </div>764 <div class="ace_line" style="height: 14px; top: 154px;">765 <span class="ace_string">766 your kids or for yourself!767 </span>768 </div>769 <div class="ace_line" style="height: 14px; top: 168px;">770 <span class="ace_string">771 """772 </span>773 </div>774 <div class="ace_line" style="height: 14px; top: 182px;">775 </div>776 <div class="ace_line" style="height: 14px; top: 196px;">777 <span class="ace_comment">778 ################################################################################779 </span>780 </div>781 <div class="ace_line" style="height: 14px; top: 210px;">782 <span class="ace_comment">783 # PRESS CONTROL + ENTER TO RUN THE SCRIPT784 </span>785 </div>786 <div class="ace_line" style="height: 14px; top: 224px;">787 <span class="ace_comment">788 ################################################################################789 </span>790 </div>791 <div class="ace_line" style="height: 14px; top: 238px;">792 </div>793 <div class="ace_line" style="height: 14px; top: 252px;">794 <span class="ace_comment">795 # The standard output is displayed in the bottom right panel.796 </span>797 </div>798 <div class="ace_line" style="height: 14px; top: 266px;">799 <span class="ace_keyword">800 print801 </span>802 <span class="ace_paren ace_lparen">803 (804 </span>805 <span class="ace_string">806 "Hello world!"807 </span>808 <span class="ace_paren ace_rparen">809 )810 </span>811 </div>812 <div class="ace_line" style="height: 14px; top: 280px;">813 </div>814 <div class="ace_line" style="height: 14px; top: 294px;">815 <span class="ace_comment">816 # Grid cells are 0-indexed. This is how you update a cell's color.817 </span>818 </div>819 <div class="ace_line" style="height: 14px; top: 308px;">820 <span class="ace_comment">821 # There are a few common colors predefined as global variables.822 </span>823 </div>824 <div class="ace_line" style="height: 14px; top: 322px;">825 <span class="ace_identifier">826 color827 </span>828 <span class="ace_paren ace_lparen">829 (830 </span>831 <span class="ace_constant ace_numeric">832 0833 </span>834 <span class="ace_punctuation">835 ,836 </span>837 <span class="ace_constant ace_numeric">838 1839 </span>840 <span class="ace_punctuation">841 ,842 </span>843 <span class="ace_identifier">844 red845 </span>846 <span class="ace_paren ace_rparen">847 )848 </span>849 </div>850 <div class="ace_line" style="height: 14px; top: 336px;">851 </div>852 <div class="ace_line" style="height: 14px; top: 350px;">853 <span class="ace_comment">854 # You can resize the grid as follows (this will clear the grid first).855 </span>856 </div>857 <div class="ace_line" style="height: 14px; top: 364px;">858 <span class="ace_comment">859 # size(12, 12)860 </span>861 </div>862 <div class="ace_line" style="height: 14px; top: 378px;">863 </div>864 <div class="ace_line" style="height: 14px; top: 392px;">865 <span class="ace_comment">866 # You can enter arbitrary colors as RGB triplets (numbers in 0-255). You can867 </span>868 </div>869 <div class="ace_line" style="height: 14px; top: 406px;">870 <span class="ace_comment">871 # use the color picker at the top.872 </span>873 </div>874 <div class="ace_line" style="height: 14px; top: 420px;">875 <span class="ace_keyword">876 for877 </span>878 <span class="ace_identifier">879 j880 </span>881 <span class="ace_keyword">882 in883 </span>884 <span class="ace_support ace_function">885 range886 </span>887 <span class="ace_paren ace_lparen">888 (889 </span>890 <span class="ace_constant ace_numeric">891 2892 </span>893 <span class="ace_punctuation">894 ,895 </span>896 <span class="ace_constant ace_numeric">897 5898 </span>899 <span class="ace_paren ace_rparen">900 )901 </span>902 <span class="ace_punctuation">903 :904 </span>905 </div>906 <div class="ace_line" style="height: 14px; top: 434px;">907 <span class="ace_identifier">908 color909 </span>910 <span class="ace_paren ace_lparen">911 (912 </span>913 <span class="ace_constant ace_numeric">914 0915 </span>916 <span class="ace_punctuation">917 ,918 </span>919 <span class="ace_identifier">920 j921 </span>922 <span class="ace_punctuation">923 ,924 </span>925 <span class="ace_paren ace_lparen">926 (927 </span>928 <span class="ace_constant ace_numeric">929 255930 </span>931 <span class="ace_punctuation">932 ,933 </span>934 <span class="ace_constant ace_numeric">935 180936 </span>937 <span class="ace_punctuation">938 ,939 </span>940 <span class="ace_constant ace_numeric">941 5942 </span>943 <span class="ace_paren ace_rparen">944 ))945 </span>946 </div>947 <div class="ace_line" style="height: 14px; top: 448px;">948 </div>949 <div class="ace_line" style="height: 14px; top: 462px;">950 <span class="ace_comment">951 # You can also write one short strings in cells.952 </span>953 </div>954 <div class="ace_line" style="height: 14px; top: 476px;">955 <span class="ace_identifier">956 text957 </span>958 <span class="ace_paren ace_lparen">959 (960 </span>961 <span class="ace_constant ace_numeric">962 0963 </span>964 <span class="ace_punctuation">965 ,966 </span>967 <span class="ace_constant ace_numeric">968 6969 </span>970 <span class="ace_punctuation">971 ,972 </span>973 <span class="ace_string">974 "Hi!"975 </span>976 <span class="ace_paren ace_rparen">977 )978 </span>979 </div>980 <div class="ace_line" style="height: 14px; top: 490px;">981 </div>982 <div class="ace_line" style="height: 14px; top: 504px;">983 <span class="ace_comment">984 # Use the emoji selector at the top to write Unicode emojis.985 </span>986 </div>987 <div class="ace_line" style="height: 14px; top: 518px;">988 <span class="ace_identifier">989 text990 </span>991 <span class="ace_paren ace_lparen">992 (993 </span>994 <span class="ace_constant ace_numeric">995 0996 </span>997 <span class="ace_punctuation">998 ,999 </span>1000 <span class="ace_constant ace_numeric">1001 81002 </span>1003 <span class="ace_punctuation">1004 ,1005 </span>1006 <span class="ace_string">1007 "1008 <span class="ace_cjk" style="width: 14.4531px;">1009 ๐1010 </span>1011 "1012 </span>1013 <span class="ace_paren ace_rparen">1014 )1015 </span>1016 </div>1017 <div class="ace_line" style="height: 14px; top: 532px;">1018 </div>1019 <div class="ace_line" style="height: 14px; top: 546px;">1020 <span class="ace_comment">1021 # You can change the default size as follows:1022 </span>1023 </div>1024 <div class="ace_line" style="height: 14px; top: 560px;">1025 <span class="ace_comment">1026 # font(12)1027 </span>1028 </div>1029 <div class="ace_line" style="height: 14px; top: 574px;">1030 </div>1031 <div class="ace_line" style="height: 14px; top: 588px;">1032 <span class="ace_comment">1033 # This function clears the grid:1034 </span>1035 </div>1036 <div class="ace_line" style="height: 14px; top: 602px;">1037 <span class="ace_comment">1038 # clear()1039 </span>1040 </div>1041 <div class="ace_line" style="height: 14px; top: 616px;">1042 </div>1043 <div class="ace_line" style="height: 14px; top: 630px;">1044 <span class="ace_comment">1045 # This one fills all cells with a given color:1046 </span>1047 </div>1048 <div class="ace_line" style="height: 14px; top: 644px;">1049 <span class="ace_comment">1050 # fill(black)1051 </span>1052 </div>1053 <div class="ace_line" style="height: 14px; top: 658px;">1054 </div>1055 <div class="ace_line" style="height: 14px; top: 672px;">1056 <span class="ace_comment">1057 # Some cell manipulation functions:1058 </span>1059 </div>1060 </div>1061 <div class="ace_layer ace_marker-layer">1062 </div>1063 <div class="ace_layer ace_cursor-layer ace_hidden-cursors">1064 <div class="ace_cursor" style="display: block; transform: translate(4px, 1106px); width: 7px; height: 14px;">1065 </div>1066 </div>1067 </div>1068 </div>1069 <div class="ace_scrollbar ace_scrollbar-v" style="width: 20px; bottom: 0px;">1070 <div class="ace_scrollbar-inner" style="width: 20px; height: 1120px;">1071 1072 </div>1073 </div>1074 <div class="ace_scrollbar ace_scrollbar-h" style="height: 20px; left: 47.4531px; right: 0px;">1075 <div class="ace_scrollbar-inner" style="height: 20px; width: 586px;">1076 1077 </div>1078 </div>1079 <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;">1080 <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;">1081 ืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืืื1082 </div>1083 <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; overflow: visible;">1084 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX1085 </div>1086 </div>1087 </div>1088 </div>1089 <!-- RIGHT PANEL -->1090 <div class="panel right-panel">1091 <!-- GRID VISUAL COMPONENT -->1092 <div class="subpanel">1093 <div id="grid" style="width: 60vmin;">1094 <div id="grid-table" style="font-size: 16pt; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);" tabindex="0">1095 <div style="background-color: rgb(240, 240, 240);" title="0, 0">1096 </div>1097 <div style="background-color: rgb(230, 90, 90);" title="0, 1">1098 </div>1099 <div style="background-color: rgb(255, 180, 5);" title="0, 2">1100 </div>1101 <div style="background-color: rgb(255, 180, 5);" title="0, 3">1102 </div>1103 <div style="background-color: rgb(255, 180, 5);" title="0, 4">1104 </div>1105 <div title="0, 5">1106 </div>1107 <div title="0, 6">1108 Hi!1109 </div>1110 <div title="0, 7">1111 </div>1112 <div title="0, 8">1113 ๐1114 </div>1115 <div style="background-color: rgb(80, 200, 120);" title="0, 9">1116 </div>1117 <div title="1, 0">1118 </div>1119 <div style="background-color: rgb(240, 240, 240);" title="1, 1">1120 </div>1121 <div title="1, 2">1122 </div>1123 <div title="1, 3">1124 </div>1125 <div title="1, 4">1126 </div>1127 <div title="1, 5">1128 </div>1129 <div title="1, 6">1130 </div>1131 <div title="1, 7">1132 </div>1133 <div title="1, 8">1134 </div>1135 <div style="background-color: rgb(80, 200, 120);" title="1, 9">1136 </div>1137 <div title="2, 0">1138 </div>1139 <div title="2, 1">1140 </div>1141 <div style="background-color: rgb(240, 240, 240);" title="2, 2">1142 </div>1143 <div style="background-color: rgb(200, 200, 200);" title="2, 3">1144 </div>1145 <div style="background-color: rgb(200, 200, 200);" title="2, 4">1146 </div>1147 <div style="background-color: rgb(200, 200, 200);" title="2, 5">1148 </div>1149 <div style="background-color: rgb(200, 200, 200);" title="2, 6">1150 </div>1151 <div title="2, 7">1152 </div>1153 <div title="2, 8">1154 </div>1155 <div style="background-color: rgb(80, 200, 120);" title="2, 9">1156 </div>1157 <div title="3, 0">1158 </div>1159 <div title="3, 1">1160 </div>1161 <div style="background-color: rgb(200, 200, 200);" title="3, 2">1162 </div>1163 <div style="background-color: rgb(240, 240, 240);" title="3, 3">1164 </div>1165 <div style="background-color: rgb(200, 200, 200);" title="3, 4">1166 </div>1167 <div style="background-color: rgb(200, 200, 200);" title="3, 5">1168 </div>1169 <div style="background-color: rgb(200, 200, 200);" title="3, 6">1170 </div>1171 <div title="3, 7">1172 </div>1173 <div title="3, 8">1174 </div>1175 <div style="background-color: rgb(80, 200, 120);" title="3, 9">1176 </div>1177 <div title="4, 0">1178 </div>1179 <div title="4, 1">1180 </div>1181 <div style="background-color: rgb(200, 200, 200);" title="4, 2">1182 </div>1183 <div style="background-color: rgb(200, 200, 200);" title="4, 3">1184 </div>1185 <div style="background-color: rgb(240, 240, 240);" title="4, 4">1186 </div>1187 <div style="background-color: rgb(200, 200, 200);" title="4, 5">1188 </div>1189 <div style="background-color: rgb(200, 200, 200);" title="4, 6">1190 </div>1191 <div title="4, 7">1192 </div>1193 <div title="4, 8">1194 </div>1195 <div style="background-color: rgb(80, 200, 120);" title="4, 9">1196 </div>1197 <div title="5, 0">1198 </div>1199 <div title="5, 1">1200 </div>