{"id":11,"date":"2026-05-03T10:03:06","date_gmt":"2026-05-03T10:03:06","guid":{"rendered":"https:\/\/code.mindlab.edu.gr\/?page_id=11"},"modified":"2026-05-03T11:55:36","modified_gmt":"2026-05-03T11:55:36","slug":"elementor-11","status":"publish","type":"page","link":"https:\/\/code.mindlab.edu.gr\/","title":{"rendered":"Micro:Minion 1.0"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MindLab Micro:Minion 1.0<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', 'Helvetica', sans-serif;\r\n\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n padding: 15px;\r\n overflow-x: hidden;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n animation: slideDown 0.5s ease;\r\n }\r\n\r\n @keyframes slideDown {\r\n from { opacity: 0; transform: translateY(-30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .title {\r\n color: white;\r\n font-size: 36px;\r\n text-shadow: 3px 3px 6px rgba(0,0,0,0.3);\r\n margin-bottom: 10px;\r\n }\r\n\r\n .subtitle {\r\n color: rgba(255,255,255,0.9);\r\n font-size: 18px;\r\n margin-top: 5px;\r\n }\r\n\r\n .controls-bar {\r\n background: white;\r\n padding: 15px;\r\n border-radius: 20px;\r\n margin-bottom: 20px;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .status {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 18px;\r\n font-weight: bold;\r\n padding: 10px 20px;\r\n background: #f0f0f0;\r\n border-radius: 20px;\r\n }\r\n\r\n .status-dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #ff4757;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n .status.connected .status-dot {\r\n background: #2ed573;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.6; transform: scale(1.1); }\r\n }\r\n\r\n .btn {\r\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\r\n color: white;\r\n border: none;\r\n padding: 12px 25px;\r\n border-radius: 30px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.3);\r\n }\r\n\r\n .btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .btn.connected {\r\n background: linear-gradient(135deg, #2ed573 0%, #06d6a0 100%);\r\n }\r\n\r\n .main-grid {\r\n display: grid;\r\n grid-template-columns: 320px 1fr;\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .panel {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 20px;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .panel-title {\r\n font-size: 22px;\r\n color: #667eea;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .blocks-container {\r\n max-height: calc(100vh - 200px);\r\n overflow-y: auto;\r\n padding-right: 10px;\r\n }\r\n\r\n .blocks-container::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n .blocks-container::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n\r\n .blocks-container::-webkit-scrollbar-thumb {\r\n background: #667eea;\r\n border-radius: 10px;\r\n }\r\n\r\n .block-category {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .category-title {\r\n font-size: 16px;\r\n font-weight: bold;\r\n color: #555;\r\n margin-bottom: 10px;\r\n padding: 8px 12px;\r\n background: #f0f0f0;\r\n border-radius: 10px;\r\n }\r\n\r\n .blocks-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n }\r\n\r\n .block {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 10px;\r\n cursor: grab;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 3px 8px rgba(0,0,0,0.1);\r\n text-align: center;\r\n border: 3px solid;\r\n user-select: none;\r\n }\r\n\r\n .block:active {\r\n cursor: grabbing;\r\n transform: scale(1.05);\r\n }\r\n\r\n .block:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 12px rgba(0,0,0,0.15);\r\n }\r\n\r\n .block.hearts { border-color: #ff6b6b; }\r\n .block.smile { border-color: #ffd93d; }\r\n .block.arrow { border-color: #4d96ff; }\r\n .block.sad { border-color: #9d84b7; }\r\n .block.check { border-color: #06d6a0; }\r\n .block.cross { border-color: #ef476f; }\r\n .block.house { border-color: #ff8c42; }\r\n .block.sun { border-color: #ffd60a; }\r\n .block.sound { border-color: #2ed573; background: linear-gradient(135deg, #fff 0%, #e0ffe6 100%); }\r\n .block.pin { border-color: #4d96ff; background: linear-gradient(135deg, #fff 0%, #e0efff 100%); }\r\n .block.sensor { border-color: #9d84b7; background: linear-gradient(135deg, #fff 0%, #f0e8ff 100%); }\r\n .block.control { border-color: #ffa500; background: linear-gradient(135deg, #fff 0%, #fff4e0 100%); }\r\n\r\n .block-icon {\r\n font-size: 32px;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .block-label {\r\n font-size: 10px;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n .block-sublabel {\r\n font-size: 9px;\r\n color: #666;\r\n margin-top: 2px;\r\n }\r\n\r\n .sequence-panel {\r\n display: flex;\r\n flex-direction: column;\r\n height: calc(100vh - 200px);\r\n }\r\n\r\n .sequence-area {\r\n flex: 1;\r\n background: #f8f9fa;\r\n border: 3px dashed #667eea;\r\n border-radius: 15px;\r\n padding: 15px;\r\n margin-bottom: 15px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n align-items: flex-start;\r\n align-content: flex-start;\r\n overflow-y: auto;\r\n }\r\n\r\n .sequence-area.dragover {\r\n background: #e8ebff;\r\n border-color: #4d96ff;\r\n }\r\n\r\n .sequence-block {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 12px;\r\n box-shadow: 0 3px 8px rgba(0,0,0,0.15);\r\n position: relative;\r\n cursor: move;\r\n border: 3px solid;\r\n min-width: 90px;\r\n text-align: center;\r\n }\r\n\r\n .sequence-block .block-icon {\r\n font-size: 36px;\r\n }\r\n\r\n .sequence-block .block-label {\r\n font-size: 11px;\r\n }\r\n\r\n .sequence-block .remove-btn {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ff4757;\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* REPEAT Container Styles *\/\r\n .repeat-container {\r\n background: linear-gradient(135deg, #fff4e0 0%, #ffe8cc 100%);\r\n border: 3px solid #ffa500;\r\n border-radius: 15px;\r\n padding: 15px;\r\n margin: 10px 0;\r\n position: relative;\r\n min-width: 250px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.15);\r\n }\r\n\r\n .repeat-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n font-weight: bold;\r\n color: #ff8c00;\r\n }\r\n\r\n .repeat-header .block-icon {\r\n font-size: 28px;\r\n }\r\n\r\n .repeat-header .remove-btn {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ff4757;\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n\r\n .repeat-drop-zone {\r\n min-height: 80px;\r\n background: rgba(255,255,255,0.6);\r\n border: 2px dashed #ffa500;\r\n border-radius: 10px;\r\n padding: 10px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n align-items: flex-start;\r\n align-content: flex-start;\r\n }\r\n\r\n .repeat-drop-zone.dragover {\r\n background: rgba(255,200,100,0.3);\r\n border-color: #ff8c00;\r\n }\r\n\r\n .repeat-drop-zone.empty {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #ffa500;\r\n font-size: 14px;\r\n text-align: center;\r\n }\r\n\r\n .repeat-bracket {\r\n position: absolute;\r\n left: -15px;\r\n top: 35px;\r\n bottom: 10px;\r\n width: 10px;\r\n border-left: 4px solid #ffa500;\r\n border-top: 4px solid #ffa500;\r\n border-bottom: 4px solid #ffa500;\r\n border-radius: 8px 0 0 8px;\r\n }\r\n\r\n .block-input {\r\n background: #f0f0f0;\r\n border: 2px solid #667eea;\r\n border-radius: 6px;\r\n padding: 4px 8px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n color: #667eea;\r\n width: 70px;\r\n text-align: center;\r\n margin: 0 5px;\r\n font-family: Verdana;\r\n }\r\n\r\n .block-input:focus {\r\n outline: none;\r\n border-color: #4d96ff;\r\n background: white;\r\n }\r\n\r\n .sequence-controls {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn-play {\r\n background: linear-gradient(135deg, #2ed573 0%, #06d6a0 100%);\r\n flex: 1;\r\n }\r\n\r\n .btn-clear {\r\n background: linear-gradient(135deg, #ff4757 0%, #ef476f 100%);\r\n }\r\n\r\n .btn-save {\r\n background: linear-gradient(135deg, #4d96ff 0%, #667eea 100%);\r\n }\r\n\r\n .feedback {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(0);\r\n background: white;\r\n padding: 30px 50px;\r\n border-radius: 25px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.4);\r\n z-index: 1000;\r\n text-align: center;\r\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n max-width: 90%;\r\n }\r\n\r\n .feedback.show {\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n\r\n .feedback-icon {\r\n font-size: 80px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .feedback-text {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: #333;\r\n white-space: pre-line;\r\n }\r\n\r\n .overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 999;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .overlay.show {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .empty-message {\r\n text-align: center;\r\n color: #999;\r\n padding: 30px;\r\n font-size: 16px;\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .main-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .blocks-grid {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .title { font-size: 28px; }\r\n .blocks-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1 class=\"title\">\ud83e\udd16 MindLab Micro:Minion 1.0<\/h1>\r\n <div class=\"subtitle\">\ud83d\udd0c \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03bc\u03b5 USB \u03ba\u03b1\u03bb\u03ce\u03b4\u03b9\u03bf<\/div>\r\n <\/div>\r\n\r\n <div class=\"controls-bar\">\r\n <div class=\"status\" id=\"status\">\r\n <span class=\"status-dot\"><\/span>\r\n <span id=\"statusText\">\u038c\u03c7\u03b9 \u03a3\u03c5\u03bd\u03b4\u03b5\u03b4\u03b5\u03bc\u03ad\u03bd\u03bf<\/span>\r\n <\/div>\r\n \r\n <button class=\"btn\" id=\"connectBtn\" onclick=\"connectSerial()\">\r\n \ud83d\udd0c \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 USB\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"main-grid\">\r\n <!-- Left Panel: Blocks -->\r\n <div class=\"panel\">\r\n <h2 class=\"panel-title\">\ud83e\udde9 \u038c\u03bb\u03b5\u03c2 \u03bf\u03b9 \u0395\u03bd\u03c4\u03bf\u03bb\u03ad\u03c2<\/h2>\r\n <div class=\"blocks-container\">\r\n \r\n <!-- Display Commands -->\r\n <div class=\"block-category\">\r\n <div class=\"category-title\">\ud83d\udcfa \u039f\u03b8\u03cc\u03bd\u03b7-\u0395\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2<\/div>\r\n <div class=\"blocks-grid\">\r\n <div class=\"block hearts\" draggable=\"true\" data-command=\"hearts\">\r\n <span class=\"block-icon\">\u2764\ufe0f<\/span>\r\n <div class=\"block-label\">\u039a\u03b1\u03c1\u03b4\u03b9\u03ad\u03c2<\/div>\r\n <\/div>\r\n <div class=\"block smile\" draggable=\"true\" data-command=\"smile\">\r\n <span class=\"block-icon\">\ud83d\ude0a<\/span>\r\n <div class=\"block-label\">\u03a7\u03b1\u03bc\u03cc\u03b3\u03b5\u03bb\u03bf<\/div>\r\n <\/div>\r\n <div class=\"block arrow\" draggable=\"true\" data-command=\"arrow\">\r\n <span class=\"block-icon\">\u2b06\ufe0f<\/span>\r\n <div class=\"block-label\">\u0392\u03ad\u03bb\u03bf\u03b9<\/div>\r\n <\/div>\r\n <div class=\"block sad\" draggable=\"true\" data-command=\"sad\">\r\n <span class=\"block-icon\">\ud83d\ude22<\/span>\r\n <div class=\"block-label\">\u039b\u03c5\u03c0\u03b7\u03bc\u03ad\u03bd\u03bf<\/div>\r\n <\/div>\r\n <div class=\"block check\" draggable=\"true\" data-command=\"check\">\r\n <span class=\"block-icon\">\u2705<\/span>\r\n <div class=\"block-label\">\u03a3\u03c9\u03c3\u03c4\u03cc<\/div>\r\n <\/div>\r\n <div class=\"block cross\" draggable=\"true\" data-command=\"cross\">\r\n <span class=\"block-icon\">\u274c<\/span>\r\n <div class=\"block-label\">\u039b\u03ac\u03b8\u03bf\u03c2<\/div>\r\n <\/div>\r\n <div class=\"block house\" draggable=\"true\" data-command=\"house\">\r\n <span class=\"block-icon\">\ud83c\udfe0<\/span>\r\n <div class=\"block-label\">\u03a3\u03c0\u03af\u03c4\u03b9<\/div>\r\n <\/div>\r\n <div class=\"block sun\" draggable=\"true\" data-command=\"sun\">\r\n <span class=\"block-icon\">\u2600\ufe0f<\/span>\r\n <div class=\"block-label\">\u0389\u03bb\u03b9\u03bf\u03c2<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Sound Commands -->\r\n <div class=\"block-category\">\r\n <div class=\"category-title\">\ud83d\udd0a \u0389\u03c7\u03bf\u03b9<\/div>\r\n <div class=\"blocks-grid\">\r\n <div class=\"block sound\" draggable=\"true\" data-command=\"SOUND:1\">\r\n <span class=\"block-icon\">\ud83c\udfb5<\/span>\r\n <div class=\"block-label\">\u039c\u03b5\u03bb\u03c9\u03b4\u03af\u03b1 1<\/div>\r\n <\/div>\r\n <div class=\"block sound\" draggable=\"true\" data-command=\"SOUND:2\">\r\n <span class=\"block-icon\">\ud83c\udfb6<\/span>\r\n <div class=\"block-label\">\u039c\u03b5\u03bb\u03c9\u03b4\u03af\u03b1 2<\/div>\r\n <\/div>\r\n <div class=\"block sound\" draggable=\"true\" data-command=\"SOUND:3\">\r\n <span class=\"block-icon\">\ud83d\udd14<\/span>\r\n <div class=\"block-label\">\u039a\u03bf\u03c5\u03b4\u03bf\u03cd\u03bd\u03b9<\/div>\r\n <\/div>\r\n <div class=\"block sound\" draggable=\"true\" data-command=\"SOUND:4\">\r\n <span class=\"block-icon\">\ud83d\udcef<\/span>\r\n <div class=\"block-label\">\u03a3\u03b5\u03b9\u03c1\u03ae\u03bd\u03b1<\/div>\r\n <\/div>\r\n <div class=\"block sound\" draggable=\"true\" data-command=\"SOUND:5\">\r\n <span class=\"block-icon\">\ud83c\udfba<\/span>\r\n <div class=\"block-label\">Fanfare<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Digital Pins -->\r\n <div class=\"block-category\">\r\n <div class=\"category-title\">\u26a1 \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03ac Pins<\/div>\r\n <div class=\"blocks-grid\">\r\n <div class=\"block pin\" draggable=\"true\" data-command=\"DPIN:0:1\">\r\n <span class=\"block-icon\">\ud83d\udfe2<\/span>\r\n <div class=\"block-label\">P0 ON<\/div>\r\n <\/div>\r\n <div class=\"block pin\" draggable=\"true\" data-command=\"DPIN:0:0\">\r\n <span class=\"block-icon\">\u26aa<\/span>\r\n <div class=\"block-label\">P0 OFF<\/div>\r\n <\/div>\r\n <div class=\"block pin\" draggable=\"true\" data-command=\"DPIN:1:1\">\r\n <span class=\"block-icon\">\ud83d\udfe2<\/span>\r\n <div class=\"block-label\">P1 ON<\/div>\r\n <\/div>\r\n <div class=\"block pin\" draggable=\"true\" data-command=\"DPIN:1:0\">\r\n <span class=\"block-icon\">\u26aa<\/span>\r\n <div class=\"block-label\">P1 OFF<\/div>\r\n <\/div>\r\n <div class=\"block pin\" draggable=\"true\" data-command=\"DPIN:2:1\">\r\n <span class=\"block-icon\">\ud83d\udfe2<\/span>\r\n <div class=\"block-label\">P2 ON<\/div>\r\n <\/div>\r\n <div class=\"block pin\" draggable=\"true\" data-command=\"DPIN:2:0\">\r\n <span class=\"block-icon\">\u26aa<\/span>\r\n <div class=\"block-label\">P2 OFF<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Sensors -->\r\n <div class=\"block-category\">\r\n <div class=\"category-title\">\ud83c\udf21\ufe0f \u0391\u03b9\u03c3\u03b8\u03b7\u03c4\u03ae\u03c1\u03b5\u03c2<\/div>\r\n <div class=\"blocks-grid\">\r\n <div class=\"block sensor\" draggable=\"true\" data-command=\"READ:TEMP\">\r\n <span class=\"block-icon\">\ud83c\udf21\ufe0f<\/span>\r\n <div class=\"block-label\">\u0398\u03b5\u03c1\u03bc\u03bf\u03ba\u03c1\u03b1\u03c3\u03af\u03b1<\/div>\r\n <\/div>\r\n <div class=\"block sensor\" draggable=\"true\" data-command=\"READ:ACCEL\">\r\n <span class=\"block-icon\">\ud83d\udcd0<\/span>\r\n <div class=\"block-label\">\u0395\u03c0\u03b9\u03c4\u03ac\u03c7\u03c5\u03bd\u03c3\u03b7<\/div>\r\n <\/div>\r\n <div class=\"block sensor\" draggable=\"true\" data-command=\"READ:COMPASS\">\r\n <span class=\"block-icon\">\ud83e\udded<\/span>\r\n <div class=\"block-label\">\u03a0\u03c5\u03be\u03af\u03b4\u03b1<\/div>\r\n <\/div>\r\n <div class=\"block sensor\" draggable=\"true\" data-command=\"READ:SOUND\">\r\n <span class=\"block-icon\">\ud83d\udd0a<\/span>\r\n <div class=\"block-label\">\u0388\u03bd\u03c4\u03b1\u03c3\u03b7 \u0389\u03c7\u03bf\u03c5<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Control Blocks -->\r\n <div class=\"block-category\">\r\n <div class=\"category-title\">\u23f1\ufe0f \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/div>\r\n <div class=\"blocks-grid\">\r\n <div class=\"block control\" draggable=\"true\" data-command=\"WAIT\" data-editable=\"true\" data-default=\"3\">\r\n <span class=\"block-icon\">\u23f8\ufe0f<\/span>\r\n <div class=\"block-label\">\u03a0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5<\/div>\r\n <div class=\"block-sublabel\">\u0394\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1<\/div>\r\n <\/div>\r\n <div class=\"block control\" draggable=\"true\" data-command=\"REPEAT\" data-editable=\"true\" data-default=\"5\" data-container=\"true\">\r\n <span class=\"block-icon\">\ud83d\udd01<\/span>\r\n <div class=\"block-label\">\u0395\u03c0\u03b1\u03bd\u03ac\u03bb\u03b1\u03b2\u03b5<\/div>\r\n <div class=\"block-sublabel\">[?] \u03c6\u03bf\u03c1\u03ad\u03c2<\/div>\r\n <\/div>\r\n <div class=\"block control\" draggable=\"true\" data-command=\"FOREVER\">\r\n <span class=\"block-icon\">\u267e\ufe0f<\/span>\r\n <div class=\"block-label\">\u0393\u03b9\u03b1 \u03a0\u03ac\u03bd\u03c4\u03b1<\/div>\r\n <\/div>\r\n <div class=\"block control\" draggable=\"true\" data-command=\"IF_TEMP_GT\" data-editable=\"true\" data-default=\"25\">\r\n <span class=\"block-icon\">\ud83c\udf21\ufe0f<\/span>\r\n <div class=\"block-label\">\u0391\u03bd \u03b8\u03b5\u03c1\u03bc. ><\/div>\r\n <div class=\"block-sublabel\">\u00b0C<\/div>\r\n <\/div>\r\n <div class=\"block control\" draggable=\"true\" data-command=\"IF_TEMP_LT\" data-editable=\"true\" data-default=\"20\">\r\n <span class=\"block-icon\">\ud83c\udf21\ufe0f<\/span>\r\n <div class=\"block-label\">\u0391\u03bd \u03b8\u03b5\u03c1\u03bc. <<\/div>\r\n <div class=\"block-sublabel\">\u00b0C<\/div>\r\n <\/div>\r\n <div class=\"block control\" draggable=\"true\" data-command=\"WAIT_BTN_A\">\r\n <span class=\"block-icon\">\ud83d\udd18<\/span>\r\n <div class=\"block-label\">\u03a0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5 \u039a\u039f\u03a5\u039c\u03a0\u0399 A<\/div>\r\n <\/div>\r\n <div class=\"block control\" draggable=\"true\" data-command=\"WAIT_BTN_B\">\r\n <span class=\"block-icon\">\ud83d\udd18<\/span>\r\n <div class=\"block-label\">\u03a0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5 \u039a\u039f\u03a5\u039c\u03a0\u0399 B<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Panel: Sequence Builder -->\r\n <div class=\"panel sequence-panel\">\r\n <h2 class=\"panel-title\">\ud83d\udccb \u0391\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u0395\u03bd\u03c4\u03bf\u03bb\u03ce\u03bd<\/h2>\r\n <div class=\"sequence-area\" id=\"sequenceArea\">\r\n <div class=\"empty-message\">\r\n \ud83c\udfaf \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03ae \u03c3\u03cd\u03c1\u03b5 blocks \u03b5\u03b4\u03ce \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c6\u03c4\u03b9\u03ac\u03be\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u03c3\u03bf\u03c5!<br>\r\n \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c3\u03c5\u03bd\u03b4\u03c5\u03ac\u03c3\u03b5\u03b9\u03c2 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2, \u03ae\u03c7\u03bf\u03c5\u03c2, pins \u03ba\u03b1\u03b9 \u03b1\u03b9\u03c3\u03b8\u03b7\u03c4\u03ae\u03c1\u03b5\u03c2!\r\n <\/div>\r\n <\/div>\r\n <div class=\"sequence-controls\">\r\n <button class=\"btn btn-play\" onclick=\"playSequence()\">\u25b6\ufe0f \u0395\u03ba\u03c4\u03ad\u03bb\u03b5\u03c3\u03b7 \u0391\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1\u03c2<\/button>\r\n <button class=\"btn btn-clear\" onclick=\"clearSequence()\">\ud83d\uddd1\ufe0f \u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2<\/button>\r\n <button class=\"btn btn-save\" onclick=\"saveSequence()\">\ud83d\udcbe \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"overlay\" id=\"overlay\"><\/div>\r\n <div class=\"feedback\" id=\"feedback\">\r\n <div class=\"feedback-icon\" id=\"feedbackIcon\">\u2728<\/div>\r\n <div class=\"feedback-text\" id=\"feedbackText\">\u039c\u03c0\u03c1\u03ac\u03b2\u03bf!<\/div>\r\n <\/div>\r\n\r\n <script>\r\n let port = null;\r\n let writer = null;\r\n let reader = null;\r\n let sequence = [];\r\n let draggedBlock = null;\r\n let draggedFromRepeat = null;\r\n\r\n \/\/ Block metadata\r\n const blockMetadata = {\r\n 'hearts': { icon: '\u2764\ufe0f', label: '\u039a\u03b1\u03c1\u03b4\u03b9\u03ad\u03c2', className: 'hearts' },\r\n 'smile': { icon: '\ud83d\ude0a', label: '\u03a7\u03b1\u03bc\u03cc\u03b3\u03b5\u03bb\u03bf', className: 'smile' },\r\n 'arrow': { icon: '\u2b06\ufe0f', label: '\u0392\u03ad\u03bb\u03bf\u03c2', className: 'arrow' },\r\n 'sad': { icon: '\ud83d\ude22', label: '\u039b\u03c5\u03c0\u03b7\u03bc\u03ad\u03bd\u03bf', className: 'sad' },\r\n 'check': { icon: '\u2705', label: '\u03a3\u03c9\u03c3\u03c4\u03cc', className: 'check' },\r\n 'cross': { icon: '\u274c', label: '\u039b\u03ac\u03b8\u03bf\u03c2', className: 'cross' },\r\n 'house': { icon: '\ud83c\udfe0', label: '\u03a3\u03c0\u03af\u03c4\u03b9', className: 'house' },\r\n 'sun': { icon: '\u2600\ufe0f', label: '\u0389\u03bb\u03b9\u03bf\u03c2', className: 'sun' },\r\n 'SOUND:1': { icon: '\ud83c\udfb5', label: '\u039c\u03b5\u03bb\u03c9\u03b4\u03af\u03b1 1', className: 'sound' },\r\n 'SOUND:2': { icon: '\ud83c\udfb6', label: '\u039c\u03b5\u03bb\u03c9\u03b4\u03af\u03b1 2', className: 'sound' },\r\n 'SOUND:3': { icon: '\ud83d\udd14', label: '\u039a\u03bf\u03c5\u03b4\u03bf\u03cd\u03bd\u03b9', className: 'sound' },\r\n 'SOUND:4': { icon: '\ud83d\udcef', label: '\u03a3\u03b5\u03b9\u03c1\u03ae\u03bd\u03b1', className: 'sound' },\r\n 'SOUND:5': { icon: '\ud83c\udfba', label: 'Fanfare', className: 'sound' },\r\n 'DPIN:0:1': { icon: '\ud83d\udfe2', label: 'P0 ON', className: 'pin' },\r\n 'DPIN:0:0': { icon: '\u26aa', label: 'P0 OFF', className: 'pin' },\r\n 'DPIN:1:1': { icon: '\ud83d\udfe2', label: 'P1 ON', className: 'pin' },\r\n 'DPIN:1:0': { icon: '\u26aa', label: 'P1 OFF', className: 'pin' },\r\n 'DPIN:2:1': { icon: '\ud83d\udfe2', label: 'P2 ON', className: 'pin' },\r\n 'DPIN:2:0': { icon: '\u26aa', label: 'P2 OFF', className: 'pin' },\r\n 'READ:TEMP': { icon: '\ud83c\udf21\ufe0f', label: '\u0398\u03b5\u03c1\u03bc\u03bf\u03ba\u03c1\u03b1\u03c3\u03af\u03b1', className: 'sensor' },\r\n 'READ:ACCEL': { icon: '\ud83d\udcd0', label: '\u0395\u03c0\u03b9\u03c4\u03ac\u03c7\u03c5\u03bd\u03c3\u03b7', className: 'sensor' },\r\n 'READ:COMPASS': { icon: '\ud83e\udded', label: '\u03a0\u03c5\u03be\u03af\u03b4\u03b1', className: 'sensor' },\r\n 'READ:SOUND': { icon: '\ud83d\udd0a', label: '\u0388\u03bd\u03c4\u03b1\u03c3\u03b7 \u0389\u03c7\u03bf\u03c5', className: 'sensor' },\r\n 'WAIT': { icon: '\u23f8\ufe0f', label: '\u03a0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5', className: 'control', editable: true, suffix: '\u03b4\u03b5\u03c5\u03c4.' },\r\n 'REPEAT': { icon: '\ud83d\udd01', label: '\u0395\u03c0\u03b1\u03bd\u03ac\u03bb\u03b1\u03b2\u03b5', className: 'control', editable: true, suffix: '\u03c6\u03bf\u03c1\u03ad\u03c2', container: true },\r\n 'FOREVER': { icon: '\u267e\ufe0f', label: '\u0393\u03b9\u03b1 \u03a0\u03ac\u03bd\u03c4\u03b1', className: 'control' },\r\n 'IF_TEMP_GT': { icon: '\ud83c\udf21\ufe0f', label: '\u0391\u03bd \u03b8\u03b5\u03c1\u03bc. >', className: 'control', editable: true, suffix: '\u00b0C' },\r\n 'IF_TEMP_LT': { icon: '\ud83c\udf21\ufe0f', label: '\u0391\u03bd \u03b8\u03b5\u03c1\u03bc. <', className: 'control', editable: true, suffix: '\u00b0C' },\r\n 'WAIT_BTN_A': { icon: '\ud83d\udd18', label: '\u03a0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5 \u039a\u039f\u03a5\u039c\u03a0\u0399 A', className: 'control' },\r\n 'WAIT_BTN_B': { icon: '\ud83d\udd18', label: '\u03a0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5 \u039a\u039f\u03a5\u039c\u03a0\u0399 B', className: 'control' }\r\n };\r\n\r\n async function connectSerial() {\r\n if (!('serial' in navigator)) {\r\n showFeedback('\u274c', '\u03a4\u03bf \u03c0\u03c1\u03cc\u03b3\u03c1\u03b1\u03bc\u03bc\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ae\u03b3\u03b7\u03c3\u03b7\u03c2 \u03b4\u03b5\u03bd \u03c5\u03c0\u03bf\u03c3\u03c4\u03b7\u03c1\u03af\u03b6\u03b5\u03b9 Web Serial API!\\n\\n\u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 Chrome \u03ae Edge.');\r\n return;\r\n }\r\n\r\n try {\r\n showFeedback('\ud83d\udd0d', '\u0395\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae\u03c2...');\r\n \r\n port = await navigator.serial.requestPort({\r\n filters: [\r\n { usbVendorId: 0x0d28, usbProductId: 0x0204 }\r\n ]\r\n });\r\n\r\n showFeedback('\ud83d\udd17', '\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7...');\r\n \r\n await port.open({ baudRate: 115200 });\r\n writer = port.writable.getWriter();\r\n reader = port.readable.getReader();\r\n\r\n updateStatus(true);\r\n showFeedback('\ud83c\udf89', '\u03a3\u03c5\u03bd\u03b4\u03ad\u03b8\u03b7\u03ba\u03b5 \u03bc\u03b5 USB!');\r\n readSerial();\r\n\r\n } catch (error) {\r\n console.error('Serial error:', error);\r\n showFeedback('\u274c', '\u0391\u03c0\u03bf\u03c4\u03c5\u03c7\u03af\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2:\\n' + error.message);\r\n updateStatus(false);\r\n }\r\n }\r\n\r\n async function readSerial() {\r\n try {\r\n while (true) {\r\n const { value, done } = await reader.read();\r\n if (done) {\r\n reader.releaseLock();\r\n break;\r\n }\r\n \r\n const text = new TextDecoder().decode(value);\r\n console.log('Received:', text);\r\n }\r\n } catch (error) {\r\n console.error('Read error:', error);\r\n }\r\n }\r\n\r\n function updateStatus(connected) {\r\n const status = document.getElementById('status');\r\n const statusText = document.getElementById('statusText');\r\n const connectBtn = document.getElementById('connectBtn');\r\n\r\n if (connected) {\r\n status.classList.add('connected');\r\n statusText.textContent = '\ud83d\udd0c \u03a3\u03c5\u03bd\u03b4\u03b5\u03b4\u03b5\u03bc\u03ad\u03bd\u03bf USB';\r\n connectBtn.textContent = '\u2705 \u03a3\u03c5\u03bd\u03b4\u03b5\u03b4\u03b5\u03bc\u03ad\u03bd\u03bf';\r\n connectBtn.classList.add('connected');\r\n } else {\r\n status.classList.remove('connected');\r\n statusText.textContent = '\u038c\u03c7\u03b9 \u03a3\u03c5\u03bd\u03b4\u03b5\u03b4\u03b5\u03bc\u03ad\u03bd\u03bf';\r\n connectBtn.textContent = '\ud83d\udd0c \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 USB';\r\n connectBtn.classList.remove('connected');\r\n }\r\n }\r\n\r\n async function sendCommand(command) {\r\n if (!writer) {\r\n showFeedback('\u26a0\ufe0f', '\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b5 \u03c4\u03bf micro:bit \u03c0\u03c1\u03ce\u03c4\u03b1!');\r\n return;\r\n }\r\n\r\n try {\r\n const encoder = new TextEncoder();\r\n const data = encoder.encode(command + '\\n');\r\n await writer.write(data);\r\n console.log('Sent:', command);\r\n } catch (error) {\r\n console.error('Write error:', error);\r\n showFeedback('\u274c', '\u03a0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1 \u03b1\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ae\u03c2');\r\n }\r\n }\r\n\r\n \/\/ Drag and Drop\r\n document.querySelectorAll('.block').forEach(block => {\r\n block.addEventListener('dragstart', (e) => {\r\n const blockEl = e.target.closest('.block');\r\n const command = blockEl.dataset.command;\r\n const meta = blockMetadata[command];\r\n const isEditable = blockEl.dataset.editable === 'true';\r\n const defaultValue = blockEl.dataset.default || '';\r\n const isContainer = blockEl.dataset.container === 'true';\r\n \r\n draggedBlock = {\r\n command: command,\r\n icon: meta.icon,\r\n label: meta.label,\r\n className: meta.className,\r\n editable: isEditable,\r\n value: defaultValue,\r\n suffix: meta.suffix || '',\r\n container: isContainer\r\n };\r\n draggedFromRepeat = null;\r\n });\r\n\r\n block.addEventListener('click', (e) => {\r\n const blockEl = e.target.closest('.block');\r\n const command = blockEl.dataset.command;\r\n const meta = blockMetadata[command];\r\n const isEditable = blockEl.dataset.editable === 'true';\r\n const defaultValue = blockEl.dataset.default || '';\r\n const isContainer = blockEl.dataset.container === 'true';\r\n \r\n const blockData = {\r\n command: command,\r\n icon: meta.icon,\r\n label: meta.label,\r\n className: meta.className,\r\n editable: isEditable,\r\n value: defaultValue,\r\n suffix: meta.suffix || '',\r\n container: isContainer\r\n };\r\n \r\n addToSequence(blockData);\r\n \r\n blockEl.style.transform = 'scale(0.95)';\r\n setTimeout(() => {\r\n blockEl.style.transform = '';\r\n }, 150);\r\n });\r\n });\r\n\r\n const sequenceArea = document.getElementById('sequenceArea');\r\n\r\n sequenceArea.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n if (!draggedFromRepeat) {\r\n sequenceArea.classList.add('dragover');\r\n }\r\n });\r\n\r\n sequenceArea.addEventListener('dragleave', () => {\r\n sequenceArea.classList.remove('dragover');\r\n });\r\n\r\n sequenceArea.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n sequenceArea.classList.remove('dragover');\r\n \r\n if (draggedBlock && !draggedFromRepeat) {\r\n addToSequence(draggedBlock);\r\n draggedBlock = null;\r\n }\r\n });\r\n\r\n function addToSequence(blockData, container = null) {\r\n const emptyMsg = sequenceArea.querySelector('.empty-message');\r\n if (emptyMsg) emptyMsg.remove();\r\n\r\n if (blockData.container) {\r\n \/\/ Create REPEAT container\r\n const repeatContainer = createRepeatContainer(blockData);\r\n sequenceArea.appendChild(repeatContainer);\r\n \r\n \/\/ Add to sequence\r\n sequence.push({\r\n type: 'repeat',\r\n value: blockData.value,\r\n children: []\r\n });\r\n \r\n } else {\r\n \/\/ Regular block\r\n const blockEl = createSequenceBlock(blockData);\r\n \r\n if (container) {\r\n \/\/ Adding to REPEAT container\r\n container.appendChild(blockEl);\r\n updateRepeatEmptyState(container);\r\n \r\n \/\/ Find which repeat container this belongs to\r\n const repeatContainer = container.closest('.repeat-container');\r\n const allRepeatContainers = Array.from(sequenceArea.querySelectorAll('.repeat-container'));\r\n const containerIndex = allRepeatContainers.indexOf(repeatContainer);\r\n \r\n \/\/ Find this repeat in sequence array\r\n let sequenceRepeatIndex = 0;\r\n let actualIndex = -1;\r\n for (let i = 0; i < sequence.length; i++) {\r\n if (sequence[i].type === 'repeat') {\r\n if (sequenceRepeatIndex === containerIndex) {\r\n actualIndex = i;\r\n break;\r\n }\r\n sequenceRepeatIndex++;\r\n }\r\n }\r\n \r\n if (actualIndex !== -1) {\r\n \/\/ Add to this repeat's children\r\n if (blockData.editable) {\r\n sequence[actualIndex].children.push({\r\n command: blockData.command,\r\n value: blockData.value,\r\n editable: true\r\n });\r\n } else {\r\n sequence[actualIndex].children.push(blockData.command);\r\n }\r\n }\r\n \r\n } else {\r\n \/\/ Adding to main sequence\r\n sequenceArea.appendChild(blockEl);\r\n \r\n if (blockData.editable) {\r\n sequence.push({\r\n command: blockData.command,\r\n value: blockData.value,\r\n editable: true\r\n });\r\n } else {\r\n sequence.push(blockData.command);\r\n }\r\n }\r\n }\r\n \r\n console.log('Updated sequence:', JSON.stringify(sequence, null, 2));\r\n }\r\n\r\n function createRepeatContainer(blockData) {\r\n const container = document.createElement('div');\r\n container.className = 'repeat-container';\r\n container.innerHTML = `\r\n <div class=\"repeat-bracket\"><\/div>\r\n <button class=\"remove-btn\" onclick=\"removeRepeatContainer(this)\">\u00d7<\/button>\r\n <div class=\"repeat-header\">\r\n <span class=\"block-icon\">${blockData.icon}<\/span>\r\n <span>${blockData.label}<\/span>\r\n <input type=\"number\" class=\"block-input\" value=\"${blockData.value}\" min=\"1\" max=\"99\" onchange=\"updateRepeatValue(this)\">\r\n <span>${blockData.suffix}<\/span>\r\n <\/div>\r\n <div class=\"repeat-drop-zone empty\" data-repeat-zone=\"true\">\r\n \u03a3\u03cd\u03c1\u03b5 blocks \u03b5\u03b4\u03ce \u2193\r\n <\/div>\r\n `;\r\n\r\n const dropZone = container.querySelector('.repeat-drop-zone');\r\n \r\n dropZone.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n dropZone.classList.add('dragover');\r\n });\r\n\r\n dropZone.addEventListener('dragleave', (e) => {\r\n if (e.target === dropZone) {\r\n dropZone.classList.remove('dragover');\r\n }\r\n });\r\n\r\n dropZone.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n dropZone.classList.remove('dragover');\r\n \r\n if (draggedBlock && !draggedBlock.container) {\r\n addToSequence(draggedBlock, dropZone);\r\n draggedBlock = null;\r\n draggedFromRepeat = null;\r\n }\r\n });\r\n\r\n return container;\r\n }\r\n\r\n function createSequenceBlock(blockData) {\r\n const blockEl = document.createElement('div');\r\n blockEl.className = 'sequence-block ' + blockData.className;\r\n blockEl.draggable = true;\r\n \r\n let inputHTML = '';\r\n if (blockData.editable && !blockData.container) {\r\n inputHTML = `<input type=\"number\" class=\"block-input\" value=\"${blockData.value}\" min=\"0\" max=\"9999\" onchange=\"updateBlockValue(this)\">`;\r\n }\r\n \r\n blockEl.innerHTML = `\r\n <button class=\"remove-btn\" onclick=\"removeFromSequence(this)\">\u00d7<\/button>\r\n <span class=\"block-icon\">${blockData.icon}<\/span>\r\n <div class=\"block-label\">${blockData.label}<\/div>\r\n ${inputHTML}\r\n ${blockData.suffix && !blockData.container ? '<div class=\"block-sublabel\">' + blockData.suffix + '<\/div>' : ''}\r\n `;\r\n\r\n blockEl.addEventListener('dragstart', (e) => {\r\n const parent = blockEl.parentElement;\r\n if (parent.classList.contains('repeat-drop-zone')) {\r\n draggedFromRepeat = parent;\r\n e.dataTransfer.effectAllowed = 'move';\r\n }\r\n });\r\n \r\n const input = blockEl.querySelector('.block-input');\r\n if (input) {\r\n input.addEventListener('mousedown', (e) => e.stopPropagation());\r\n input.addEventListener('touchstart', (e) => e.stopPropagation());\r\n }\r\n\r\n return blockEl;\r\n }\r\n\r\n function findRepeatIndex(dropZone) {\r\n const container = dropZone.closest('.repeat-container');\r\n if (!container) return -1;\r\n \r\n const allContainers = sequenceArea.querySelectorAll('.repeat-container');\r\n return Array.from(allContainers).indexOf(container);\r\n }\r\n\r\n function updateRepeatEmptyState(dropZone) {\r\n const blocks = dropZone.querySelectorAll('.sequence-block');\r\n if (blocks.length === 0) {\r\n dropZone.classList.add('empty');\r\n dropZone.textContent = '\u03a3\u03cd\u03c1\u03b5 blocks \u03b5\u03b4\u03ce \u2193';\r\n } else {\r\n dropZone.classList.remove('empty');\r\n }\r\n }\r\n\r\n function updateBlockValue(input) {\r\n \/\/ Update sequence data\r\n const block = input.closest('.sequence-block');\r\n const parent = block.parentElement;\r\n \r\n if (parent.classList.contains('repeat-drop-zone')) {\r\n const repeatIndex = findRepeatIndex(parent);\r\n if (repeatIndex !== -1) {\r\n const blocks = parent.querySelectorAll('.sequence-block');\r\n const blockIndex = Array.from(blocks).indexOf(block);\r\n if (typeof sequence[repeatIndex].children[blockIndex] === 'object') {\r\n sequence[repeatIndex].children[blockIndex].value = input.value;\r\n }\r\n }\r\n } else {\r\n const index = Array.from(sequenceArea.children).indexOf(block);\r\n if (typeof sequence[index] === 'object') {\r\n sequence[index].value = input.value;\r\n }\r\n }\r\n }\r\n\r\n function updateRepeatValue(input) {\r\n const container = input.closest('.repeat-container');\r\n const index = Array.from(sequenceArea.querySelectorAll('.repeat-container')).indexOf(container);\r\n \r\n let sequenceIndex = 0;\r\n for (let i = 0; i < sequence.length; i++) {\r\n if (sequence[i].type === 'repeat') {\r\n if (sequenceIndex === index) {\r\n sequence[i].value = input.value;\r\n break;\r\n }\r\n sequenceIndex++;\r\n }\r\n }\r\n }\r\n\r\n function removeFromSequence(btn) {\r\n const block = btn.parentElement;\r\n const parent = block.parentElement;\r\n \r\n if (parent.classList.contains('repeat-drop-zone')) {\r\n const repeatIndex = findRepeatIndex(parent);\r\n if (repeatIndex !== -1) {\r\n const blocks = parent.querySelectorAll('.sequence-block');\r\n const blockIndex = Array.from(blocks).indexOf(block);\r\n sequence[repeatIndex].children.splice(blockIndex, 1);\r\n }\r\n block.remove();\r\n updateRepeatEmptyState(parent);\r\n } else {\r\n const index = Array.from(sequenceArea.children).indexOf(block);\r\n sequence.splice(index, 1);\r\n block.remove();\r\n }\r\n\r\n if (sequenceArea.children.length === 0) {\r\n sequenceArea.innerHTML = '<div class=\"empty-message\">\ud83c\udfaf \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03ae \u03c3\u03cd\u03c1\u03b5 blocks \u03b5\u03b4\u03ce \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c6\u03c4\u03b9\u03ac\u03be\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u03c3\u03bf\u03c5!<br>\u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c3\u03c5\u03bd\u03b4\u03c5\u03ac\u03c3\u03b5\u03b9\u03c2 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2, \u03ae\u03c7\u03bf\u03c5\u03c2, pins \u03ba\u03b1\u03b9 \u03b1\u03b9\u03c3\u03b8\u03b7\u03c4\u03ae\u03c1\u03b5\u03c2!<\/div>';\r\n }\r\n }\r\n\r\n function removeRepeatContainer(btn) {\r\n const container = btn.parentElement;\r\n const allContainers = sequenceArea.querySelectorAll('.repeat-container');\r\n const index = Array.from(allContainers).indexOf(container);\r\n \r\n \/\/ Remove from sequence\r\n let sequenceIndex = 0;\r\n for (let i = 0; i < sequence.length; i++) {\r\n if (sequence[i].type === 'repeat') {\r\n if (sequenceIndex === index) {\r\n sequence.splice(i, 1);\r\n break;\r\n }\r\n sequenceIndex++;\r\n }\r\n }\r\n \r\n container.remove();\r\n\r\n if (sequenceArea.children.length === 0) {\r\n sequenceArea.innerHTML = '<div class=\"empty-message\">\ud83c\udfaf \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03ae \u03c3\u03cd\u03c1\u03b5 blocks \u03b5\u03b4\u03ce \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c6\u03c4\u03b9\u03ac\u03be\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u03c3\u03bf\u03c5!<br>\u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c3\u03c5\u03bd\u03b4\u03c5\u03ac\u03c3\u03b5\u03b9\u03c2 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2, \u03ae\u03c7\u03bf\u03c5\u03c2, pins \u03ba\u03b1\u03b9 \u03b1\u03b9\u03c3\u03b8\u03b7\u03c4\u03ae\u03c1\u03b5\u03c2!<\/div>';\r\n }\r\n }\r\n\r\n async function playSequence() {\r\n if (sequence.length === 0) {\r\n showFeedback('\u26a0\ufe0f', '\u0397 \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03ac\u03b4\u03b5\u03b9\u03b1!');\r\n return;\r\n }\r\n\r\n if (!writer) {\r\n showFeedback('\u26a0\ufe0f', '\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b5 \u03c4\u03bf micro:bit \u03c0\u03c1\u03ce\u03c4\u03b1!');\r\n return;\r\n }\r\n\r\n showFeedback('\u25b6\ufe0f', '\u0395\u03ba\u03c4\u03ad\u03bb\u03b5\u03c3\u03b7 \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1\u03c2...');\r\n await executeSequence(sequence);\r\n showFeedback('\u2705', '\u039f\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03ce\u03b8\u03b7\u03ba\u03b5!');\r\n }\r\n\r\n async function executeSequence(seq) {\r\n for (let i = 0; i < seq.length; i++) {\r\n const item = seq[i];\r\n \r\n \/\/ Handle REPEAT container\r\n if (typeof item === 'object' && item.type === 'repeat') {\r\n const times = parseInt(item.value) || 5;\r\n console.log('Repeating', times, 'times, children:', item.children);\r\n \r\n \/\/ Execute children multiple times\r\n for (let r = 0; r < times; r++) {\r\n console.log('Repeat iteration', r + 1, 'of', times);\r\n await executeSequence(item.children);\r\n }\r\n continue;\r\n }\r\n \r\n let cmd, value;\r\n \r\n if (typeof item === 'object') {\r\n cmd = item.command;\r\n value = item.value;\r\n } else {\r\n cmd = item;\r\n value = null;\r\n }\r\n\r\n console.log('Executing command:', cmd, 'value:', value);\r\n\r\n if (cmd === 'WAIT') {\r\n const seconds = parseInt(value) || 3;\r\n await sendCommand('WAIT:' + seconds);\r\n await new Promise(resolve => setTimeout(resolve, seconds * 1000));\r\n continue;\r\n }\r\n\r\n if (cmd === 'FOREVER') {\r\n showFeedback('\u267e\ufe0f', '\u0395\u03c0\u03b1\u03bd\u03ac\u03bb\u03b7\u03c8\u03b7 \u03b3\u03b9\u03b1 \u03c0\u03ac\u03bd\u03c4\u03b1...');\r\n while (true) {\r\n await executeSequence(seq.slice(i + 1));\r\n }\r\n return;\r\n }\r\n\r\n if (cmd === 'IF_TEMP_GT') {\r\n const threshold = parseInt(value) || 25;\r\n await sendCommand('IF_TEMP_GT:' + threshold);\r\n await new Promise(resolve => setTimeout(resolve, 1000));\r\n continue;\r\n }\r\n\r\n if (cmd === 'IF_TEMP_LT') {\r\n const threshold = parseInt(value) || 20;\r\n await sendCommand('IF_TEMP_LT:' + threshold);\r\n await new Promise(resolve => setTimeout(resolve, 1000));\r\n continue;\r\n }\r\n\r\n if (cmd === 'WAIT_BTN_A' || cmd === 'WAIT_BTN_B') {\r\n await sendCommand(cmd);\r\n await new Promise(resolve => setTimeout(resolve, 2000));\r\n continue;\r\n }\r\n\r\n \/\/ Send regular command\r\n await sendCommand(cmd);\r\n \r\n \/\/ Wait based on command type\r\n if (cmd.startsWith('READ:')) {\r\n await new Promise(resolve => setTimeout(resolve, 1500));\r\n } else if (cmd.startsWith('DPIN:')) {\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n } else if (cmd.startsWith('SOUND:')) {\r\n await new Promise(resolve => setTimeout(resolve, 2500));\r\n } else {\r\n await new Promise(resolve => setTimeout(resolve, 2000));\r\n }\r\n }\r\n }\r\n\r\n function clearSequence() {\r\n sequence = [];\r\n sequenceArea.innerHTML = '<div class=\"empty-message\">\ud83c\udfaf \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03ae \u03c3\u03cd\u03c1\u03b5 blocks \u03b5\u03b4\u03ce \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c6\u03c4\u03b9\u03ac\u03be\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u03c3\u03bf\u03c5!<br>\u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c3\u03c5\u03bd\u03b4\u03c5\u03ac\u03c3\u03b5\u03b9\u03c2 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2, \u03ae\u03c7\u03bf\u03c5\u03c2, pins \u03ba\u03b1\u03b9 \u03b1\u03b9\u03c3\u03b8\u03b7\u03c4\u03ae\u03c1\u03b5\u03c2!<\/div>';\r\n showFeedback('\ud83d\uddd1\ufe0f', '\u039a\u03b1\u03b8\u03b1\u03c1\u03af\u03c3\u03c4\u03b7\u03ba\u03b5!');\r\n }\r\n\r\n function saveSequence() {\r\n if (sequence.length === 0) {\r\n showFeedback('\u26a0\ufe0f', '\u0397 \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03ac\u03b4\u03b5\u03b9\u03b1!');\r\n return;\r\n }\r\n\r\n const sequenceData = JSON.stringify(sequence);\r\n localStorage.setItem('microbit_sequence', sequenceData);\r\n showFeedback('\ud83d\udcbe', '\u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03c4\u03b7\u03ba\u03b5!');\r\n }\r\n\r\n function showFeedback(icon, text) {\r\n const feedback = document.getElementById('feedback');\r\n const overlay = document.getElementById('overlay');\r\n const feedbackIcon = document.getElementById('feedbackIcon');\r\n const feedbackText = document.getElementById('feedbackText');\r\n\r\n feedbackIcon.textContent = icon;\r\n feedbackText.textContent = text;\r\n\r\n overlay.classList.add('show');\r\n feedback.classList.add('show');\r\n\r\n setTimeout(() => {\r\n feedback.classList.remove('show');\r\n overlay.classList.remove('show');\r\n }, 2000);\r\n }\r\n\r\n \/\/ Load saved sequence\r\n window.addEventListener('load', () => {\r\n const saved = localStorage.getItem('microbit_sequence');\r\n if (saved) {\r\n try {\r\n const savedSeq = JSON.parse(saved);\r\n sequence = savedSeq;\r\n \/\/ Rebuild UI from saved sequence\r\n \/\/ (simplified - full implementation would recreate containers)\r\n } catch (e) {\r\n console.error('\u03a3\u03c6\u03ac\u03bb\u03bc\u03b1 \u03c6\u03cc\u03c1\u03c4\u03c9\u03c3\u03b7\u03c2:', e);\r\n }\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MindLab Micro:Minion 1.0 \ud83e\udd16 MindLab Micro:Minion 1.0 \ud83d\udd0c \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03bc\u03b5 USB \u03ba\u03b1\u03bb\u03ce\u03b4\u03b9\u03bf \u038c\u03c7\u03b9 \u03a3\u03c5\u03bd\u03b4\u03b5\u03b4\u03b5\u03bc\u03ad\u03bd\u03bf \ud83d\udd0c \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 USB \ud83e\udde9 \u038c\u03bb\u03b5\u03c2 \u03bf\u03b9 \u0395\u03bd\u03c4\u03bf\u03bb\u03ad\u03c2 \ud83d\udcfa \u039f\u03b8\u03cc\u03bd\u03b7-\u0395\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2 \u2764\ufe0f \u039a\u03b1\u03c1\u03b4\u03b9\u03ad\u03c2 \ud83d\ude0a \u03a7\u03b1\u03bc\u03cc\u03b3\u03b5\u03bb\u03bf \u2b06\ufe0f \u0392\u03ad\u03bb\u03bf\u03b9 \ud83d\ude22 \u039b\u03c5\u03c0\u03b7\u03bc\u03ad\u03bd\u03bf \u2705 \u03a3\u03c9\u03c3\u03c4\u03cc \u274c \u039b\u03ac\u03b8\u03bf\u03c2 \ud83c\udfe0 \u03a3\u03c0\u03af\u03c4\u03b9 \u2600\ufe0f \u0389\u03bb\u03b9\u03bf\u03c2 \ud83d\udd0a \u0389\u03c7\u03bf\u03b9 \ud83c\udfb5 \u039c\u03b5\u03bb\u03c9\u03b4\u03af\u03b1 1 \ud83c\udfb6 \u039c\u03b5\u03bb\u03c9\u03b4\u03af\u03b1 2 \ud83d\udd14 \u039a\u03bf\u03c5\u03b4\u03bf\u03cd\u03bd\u03b9 \ud83d\udcef \u03a3\u03b5\u03b9\u03c1\u03ae\u03bd\u03b1 \ud83c\udfba Fanfare \u26a1 \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03ac […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":16,"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/code.mindlab.edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}