\u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a0\u03bf\u03bb\u03cd\u03c2 – \u03a0\u03bf\u03bb\u03cd<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n html, body {\n height: 100%;\n width: 100%;\n }\n \n .app-container {\n height: 100%;\n width: 100%;\n overflow-auto;\n padding: 2rem;\n background-color: #FFF8E7;\n font-family: 'Comic Sans MS', 'Arial', sans-serif;\n }\n \n .header {\n text-align: center;\n margin-bottom: 2.5rem;\n }\n \n .main-title {\n margin-bottom: 0.5rem;\n font-size: 2rem;\n color: #2C3E50;\n }\n \n .subtitle {\n opacity: 0.9;\n font-size: 1.25rem;\n color: #2C3E50;\n }\n \n .cards-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1.5rem;\n max-width: 900px;\n margin: 0 auto;\n }\n \n .card {\n border-radius: 16px;\n padding: 1.5rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n color: #FFFFFF !important;\n }\n \n .card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n }\n \n .card-adjective {\n background-color: #FF6B9D !important;\n }\n \n .card-adverb {\n background-color: #4ECDC4 !important;\n }\n \n .card-tip {\n background-color: #FFB84D !important;\n }\n \n .card-title {\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n \n .card-title h3 {\n font-size: 1.25rem;\n color: #FFFFFF !important;\n }\n \n .emoji {\n font-size: 2rem;\n }\n \n .card-description {\n line-height: 1.6;\n margin-bottom: 1rem;\n font-size: 1rem;\n color: #FFFFFF !important;\n }\n \n .examples {\n margin-top: 1rem;\n padding: 1rem;\n border-radius: 8px;\n font-size: 0.9rem;\n background-color: #FFFFFF !important;\n color: #2C3E50 !important;\n }\n \n .examples strong {\n color: #2C3E50 !important;\n }\n \n .example-item {\n margin: 0.5rem 0;\n padding-left: 1rem;\n position: relative;\n color: #2C3E50 !important;\n font-size: 0.85rem;\n }\n \n .example-item::before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n font-weight: bold;\n color: #2C3E50;\n }\n \n @media (max-width: 768px) {\n .cards-grid {\n grid-template-columns: 1fr;\n }\n \n .app-container {\n padding: 1rem;\n }\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <div class=\"app-container\">\n <div class=\"header\">\n <h1 class=\"main-title\" id=\"mainTitle\">\ud83c\udf93 \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u0393\u03bb\u03ce\u03c3\u03c3\u03b1\u03c2 \ud83c\udf93<\/h1>\n <h2 class=\"subtitle\" id=\"subtitle\">\u03a0\u03bf\u03bb\u03cd\u03c2 – \u03a0\u03bf\u03bb\u03bb\u03ae – \u03a0\u03bf\u03bb\u03cd & \u03a0\u03bf\u03bb\u03cd<\/h2>\n <\/div>\n <div class=\"cards-grid\">\n <div class=\"card card-adjective\" id=\"adjectiveCard\">\n <div class=\"card-title\"><span class=\"emoji\">\ud83d\udcdd<\/span>\n <h3 id=\"adjectiveTitle\">\u0395\u03a0\u0399\u0398\u0395\u03a4\u039f: \u03a0\u03bf\u03bb\u03cd\u03c2 – \u03a0\u03bf\u03bb\u03bb\u03ae – \u03a0\u03bf\u03bb\u03cd<\/h3>\n <\/div>\n <p class=\"card-description\" id=\"adjectiveDescription\">\u03a3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03c3\u03b5 \u03b3\u03ad\u03bd\u03bf\u03c2, \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03ba\u03b1\u03b9 \u03c0\u03c4\u03ce\u03c3\u03b7!<\/p>\n <div class=\"examples\" id=\"adjectiveExamples\"><strong>\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong>\n <div class=\"example-item\">\n \u0388\u03c7\u03c9 <strong>\u03c0\u03bf\u03bb\u03bb\u03ac<\/strong> \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1 (\u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03bc\u03b5 “\u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1”)\n <\/div>\n <div class=\"example-item\">\n \u03a5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd <strong>\u03c0\u03bf\u03bb\u03bb\u03bf\u03af<\/strong> \u03bc\u03b1\u03b8\u03b7\u03c4\u03ad\u03c2 (\u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03bc\u03b5 “\u03bc\u03b1\u03b8\u03b7\u03c4\u03ad\u03c2”)\n <\/div>\n <div class=\"example-item\">\n \u0395\u03af\u03b4\u03b1 <strong>\u03c0\u03bf\u03bb\u03bb\u03ad\u03c2<\/strong> \u03c4\u03b1\u03b9\u03bd\u03af\u03b5\u03c2 (\u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03bc\u03b5 “\u03c4\u03b1\u03b9\u03bd\u03af\u03b5\u03c2”)\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card card-adverb\" id=\"adverbCard\">\n <div class=\"card-title\"><span class=\"emoji\">\u26a1<\/span>\n <h3 id=\"adverbTitle\">\u0395\u03a0\u0399\u03a1\u03a1\u0397\u039c\u0391: \u03a0\u03bf\u03bb\u03cd<\/h3>\n <\/div>\n <p class=\"card-description\" id=\"adverbDescription\">\u0394\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03c0\u03bf\u03c3\u03cc\u03c4\u03b7\u03c4\u03b1 \u03ae \u03ad\u03bd\u03c4\u03b1\u03c3\u03b7. \u03a0\u03b1\u03c1\u03b1\u03bc\u03ad\u03bd\u03b5\u03b9 \u03c0\u03ac\u03bd\u03c4\u03b1 \u03c4\u03bf \u03af\u03b4\u03b9\u03bf (\u03b4\u03b5\u03bd \u03ba\u03bb\u03af\u03bd\u03b5\u03c4\u03b1\u03b9)!<\/p>\n <div class=\"examples\" id=\"adverbExamples\"><strong>\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong>\n <div class=\"example-item\">\n \u0394\u03b9\u03b1\u03b2\u03ac\u03b6\u03c9 <strong>\u03c0\u03bf\u03bb\u03cd<\/strong> (\u03c0\u03cc\u03c3\u03bf \u03c0\u03bf\u03bb\u03cd \u03b4\u03b9\u03b1\u03b2\u03ac\u03b6\u03c9)\n <\/div>\n <div class=\"example-item\">\n \u0395\u03af\u03bd\u03b1\u03b9 <strong>\u03c0\u03bf\u03bb\u03cd<\/strong> \u03ad\u03be\u03c5\u03c0\u03bd\u03bf\u03c2 (\u03c0\u03cc\u03c3\u03bf \u03ad\u03be\u03c5\u03c0\u03bd\u03bf\u03c2)\n <\/div>\n <div class=\"example-item\">\n \u03a4\u03c1\u03ad\u03c7\u03b5\u03b9 <strong>\u03c0\u03bf\u03bb\u03cd<\/strong> \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1 (\u03c0\u03cc\u03c3\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1)\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card card-tip\" id=\"tipCard1\">\n <div class=\"card-title\"><span class=\"emoji\">\ud83d\udca1<\/span>\n <h3>\u03a0\u03ce\u03c2 \u03c4\u03bf \u03be\u03b5\u03c7\u03c9\u03c1\u03af\u03b6\u03c9;<\/h3>\n <\/div>\n <p class=\"card-description\"><strong>\u0392\u03ae\u03bc\u03b1 1:<\/strong> \u0392\u03c1\u03b5\u03c2 \u03c4\u03b7 \u03bb\u03ad\u03be\u03b7 \u03c0\u03bf\u03c5 \u03c4\u03bf \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03b5\u03af<br><strong>\u0392\u03ae\u03bc\u03b1 2:<\/strong> \u0391\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc \u2192 \u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf<br><strong>\u0392\u03ae\u03bc\u03b1 3:<\/strong> \u0391\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c1\u03ae\u03bc\u03b1, \u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf \u03ae \u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 \u2192 \u0395\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1<\/p>\n <div class=\"examples\"><strong>\u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03ad \u03c4\u03bf:<\/strong>\n <div class=\"example-item\">\n “\u0388\u03c7\u03c9 \u03c0\u03bf\u03bb\u03bb\u03ac \u03b2\u03b9\u03b2\u03bb\u03af\u03b1” \u2192 \u03b2\u03b9\u03b2\u03bb\u03af\u03b1 (\u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc) = \u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf\n <\/div>\n <div class=\"example-item\">\n “\u039c\u03b5\u03bb\u03b5\u03c4\u03ac\u03c9 \u03c0\u03bf\u03bb\u03cd” \u2192 \u03bc\u03b5\u03bb\u03b5\u03c4\u03ac\u03c9 (\u03c1\u03ae\u03bc\u03b1) = \u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card card-tip\" id=\"tipCard2\">\n <div class=\"card-title\"><span class=\"emoji\">\u26a0\ufe0f<\/span>\n <h3>\u03a0\u03c1\u03bf\u03c3\u03bf\u03c7\u03ae!<\/h3>\n <\/div>\n <p class=\"card-description\">\u03a4\u03bf \u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 “\u03c0\u03bf\u03bb\u03cd” \u03b4\u03b5\u03bd \u03b1\u03bb\u03bb\u03ac\u03b6\u03b5\u03b9 \u03c0\u03bf\u03c4\u03ad! \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03ac\u03bd\u03c4\u03b1 \u03c4\u03bf \u03af\u03b4\u03b9\u03bf!<\/p>\n <div class=\"examples\"><strong>\u03a3\u03c9\u03c3\u03c4\u03ac:<\/strong>\n <div class=\"example-item\">\n \u2713 \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03cc\u03c2\n <\/div>\n <div class=\"example-item\">\n \u2713 \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03ae\n <\/div>\n <div class=\"example-item\">\n \u2713 \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03ac\n <\/div>\n <div class=\"example-item\" style=\"margin-top: 1rem;\">\n \u2717 \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03bb\u03ae \u03ba\u03b1\u03bb\u03ae (\u039b\u0391\u0398\u039f\u03a3!)\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const defaultConfig = {\n background_color: \"#FFF8E7\",\n adjective_card_color: \"#FF6B9D\",\n adverb_card_color: \"#4ECDC4\",\n tip_card_color: \"#FFB84D\",\n text_color: \"#2C3E50\",\n example_bg_color: \"#FFFFFF\",\n font_family: \"Comic Sans MS\",\n font_size: 16,\n main_title: \"\ud83c\udf93 \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u0393\u03bb\u03ce\u03c3\u03c3\u03b1\u03c2 \ud83c\udf93\",\n subtitle: \"\u03a0\u03bf\u03bb\u03cd\u03c2 - \u03a0\u03bf\u03bb\u03bb\u03ae - \u03a0\u03bf\u03bb\u03cd & \u03a0\u03bf\u03bb\u03cd\",\n adjective_title: \"\u0395\u03a0\u0399\u0398\u0395\u03a4\u039f: \u03a0\u03bf\u03bb\u03cd\u03c2 - \u03a0\u03bf\u03bb\u03bb\u03ae - \u03a0\u03bf\u03bb\u03cd\",\n adjective_description: \"\u03a3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03c3\u03b5 \u03b3\u03ad\u03bd\u03bf\u03c2, \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03ba\u03b1\u03b9 \u03c0\u03c4\u03ce\u03c3\u03b7!\",\n adverb_title: \"\u0395\u03a0\u0399\u03a1\u03a1\u0397\u039c\u0391: \u03a0\u03bf\u03bb\u03cd\",\n adverb_description: \"\u0394\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03c0\u03bf\u03c3\u03cc\u03c4\u03b7\u03c4\u03b1 \u03ae \u03ad\u03bd\u03c4\u03b1\u03c3\u03b7. \u03a0\u03b1\u03c1\u03b1\u03bc\u03ad\u03bd\u03b5\u03b9 \u03c0\u03ac\u03bd\u03c4\u03b1 \u03c4\u03bf \u03af\u03b4\u03b9\u03bf (\u03b4\u03b5\u03bd \u03ba\u03bb\u03af\u03bd\u03b5\u03c4\u03b1\u03b9)!\"\n };\n\n async function onConfigChange(config) {\n const customFont = config.font_family || defaultConfig.font_family;\n const baseFontStack = 'Arial, sans-serif';\n const fontFamily = `${customFont}, ${baseFontStack}`;\n const baseSize = config.font_size || defaultConfig.font_size;\n const backgroundColor = config.background_color || defaultConfig.background_color;\n const adjectiveCardColor = config.adjective_card_color || defaultConfig.adjective_card_color;\n const adverbCardColor = config.adverb_card_color || defaultConfig.adverb_card_color;\n const tipCardColor = config.tip_card_color || defaultConfig.tip_card_color;\n const textColor = config.text_color || defaultConfig.text_color;\n const exampleBgColor = config.example_bg_color || defaultConfig.example_bg_color;\n\n document.querySelector('.app-container').style.backgroundColor = backgroundColor;\n document.querySelector('.app-container').style.fontFamily = fontFamily;\n \n document.getElementById('mainTitle').textContent = config.main_title || defaultConfig.main_title;\n document.getElementById('mainTitle').style.fontSize = `${baseSize * 2}px`;\n document.getElementById('mainTitle').style.color = textColor;\n \n document.getElementById('subtitle').textContent = config.subtitle || defaultConfig.subtitle;\n document.getElementById('subtitle').style.fontSize = `${baseSize * 1.25}px`;\n document.getElementById('subtitle').style.color = textColor;\n \n document.getElementById('adjectiveCard').style.backgroundColor = adjectiveCardColor;\n document.getElementById('adjectiveCard').style.color = '#FFFFFF';\n \n document.getElementById('adverbCard').style.backgroundColor = adverbCardColor;\n document.getElementById('adverbCard').style.color = '#FFFFFF';\n \n document.getElementById('tipCard1').style.backgroundColor = tipCardColor;\n document.getElementById('tipCard1').style.color = '#FFFFFF';\n \n document.getElementById('tipCard2').style.backgroundColor = tipCardColor;\n document.getElementById('tipCard2').style.color = '#FFFFFF';\n \n const cardTitles = document.querySelectorAll('.card-title h3');\n cardTitles.forEach(title => {\n title.style.fontSize = `${baseSize * 1.25}px`;\n title.style.fontFamily = fontFamily;\n });\n \n const cardDescriptions = document.querySelectorAll('.card-description');\n cardDescriptions.forEach(desc => {\n desc.style.fontSize = `${baseSize}px`;\n desc.style.fontFamily = fontFamily;\n });\n \n document.getElementById('adjectiveTitle').textContent = config.adjective_title || defaultConfig.adjective_title;\n document.getElementById('adjectiveDescription').textContent = config.adjective_description || defaultConfig.adjective_description;\n document.getElementById('adverbTitle').textContent = config.adverb_title || defaultConfig.adverb_title;\n document.getElementById('adverbDescription').textContent = config.adverb_description || defaultConfig.adverb_description;\n \n const examples = document.querySelectorAll('.examples');\n examples.forEach(example => {\n example.style.backgroundColor = exampleBgColor;\n example.style.color = textColor;\n example.style.fontSize = `${baseSize * 0.9}px`;\n example.style.fontFamily = fontFamily;\n });\n \n const exampleItems = document.querySelectorAll('.example-item');\n exampleItems.forEach(item => {\n item.style.fontSize = `${baseSize * 0.85}px`;\n item.style.fontFamily = fontFamily;\n });\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig: defaultConfig,\n onConfigChange: onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => {\n config.background_color = value;\n window.elementSdk.setConfig({ background_color: value });\n }\n },\n {\n get: () => config.adjective_card_color || defaultConfig.adjective_card_color,\n set: (value) => {\n config.adjective_card_color = value;\n window.elementSdk.setConfig({ adjective_card_color: value });\n }\n },\n {\n get: () => config.adverb_card_color || defaultConfig.adverb_card_color,\n set: (value) => {\n config.adverb_card_color = value;\n window.elementSdk.setConfig({ adverb_card_color: value });\n }\n },\n {\n get: () => config.tip_card_color || defaultConfig.tip_card_color,\n set: (value) => {\n config.tip_card_color = value;\n window.elementSdk.setConfig({ tip_card_color: value });\n }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => {\n config.text_color = value;\n window.elementSdk.setConfig({ text_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => {\n config.font_family = value;\n window.elementSdk.setConfig({ font_family: value });\n }\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (value) => {\n config.font_size = value;\n window.elementSdk.setConfig({ font_size: value });\n }\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"subtitle\", config.subtitle || defaultConfig.subtitle],\n [\"adjective_title\", config.adjective_title || defaultConfig.adjective_title],\n [\"adjective_description\", config.adjective_description || defaultConfig.adjective_description],\n [\"adverb_title\", config.adverb_title || defaultConfig.adverb_title],\n [\"adverb_description\", config.adverb_description || defaultConfig.adverb_description]\n ])\n });\n }\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b5b338464696f67',t:'MTc2NzAzMTI3MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<!doctype html>\n<html lang=\"el\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0386\u03c3\u03ba\u03b7\u03c3\u03b7 \u0393\u03c1\u03b1\u03bc\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae\u03c2<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n }\n \n * {\n box-sizing: border-box;\n }\n\n html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n }\n\n .main-wrapper {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n padding: 40px 20px;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n overflow-auto;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .main-title {\n font-size: 42px;\n font-weight: bold;\n color: #1e3a8a;\n margin-bottom: 15px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n }\n\n .intro-text {\n font-size: 20px;\n color: #475569;\n margin-bottom: 30px;\n }\n\n .theory-box {\n background: white;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 30px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n .theory-box h2 {\n color: #1e3a8a;\n font-size: 24px;\n margin-bottom: 15px;\n }\n\n .theory-box p {\n font-size: 18px;\n line-height: 1.6;\n color: #334155;\n margin-bottom: 10px;\n }\n\n .example {\n background: #eff6ff;\n padding: 15px;\n border-left: 4px solid #3b82f6;\n margin: 10px 0;\n border-radius: 5px;\n }\n\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 25px;\n margin-bottom: 30px;\n }\n\n .card {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 12px rgba(0,0,0,0.15);\n }\n\n .card-title {\n font-size: 22px;\n font-weight: bold;\n color: #1e3a8a;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .card-icon {\n font-size: 28px;\n }\n\n .question {\n font-size: 18px;\n color: #334155;\n margin-bottom: 15px;\n line-height: 1.5;\n }\n\n .options {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .option-btn {\n background: #e0e7ff;\n border: 2px solid #c7d2fe;\n border-radius: 10px;\n padding: 15px;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n text-align: left;\n }\n\n .option-btn:hover {\n background: #c7d2fe;\n transform: translateX(5px);\n }\n\n .option-btn.correct {\n background: #86efac;\n border-color: #22c55e;\n }\n\n .option-btn.incorrect {\n background: #fca5a5;\n border-color: #ef4444;\n }\n\n .option-btn:disabled {\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 10px;\n font-size: 16px;\n font-weight: 500;\n display: none;\n }\n\n .feedback.show {\n display: block;\n }\n\n .feedback.correct {\n background: #d1fae5;\n color: #065f46;\n border: 2px solid #22c55e;\n }\n\n .feedback.incorrect {\n background: #fee2e2;\n color: #991b1b;\n border: 2px solid #ef4444;\n }\n\n .score-box {\n background: white;\n border-radius: 15px;\n padding: 25px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n .score-text {\n font-size: 24px;\n color: #1e3a8a;\n font-weight: bold;\n }\n\n .score-number {\n font-size: 48px;\n color: #3b82f6;\n margin: 10px 0;\n }\n\n .fill-input {\n width: 100%;\n padding: 12px;\n font-size: 16px;\n border: 2px solid #c7d2fe;\n border-radius: 8px;\n margin-bottom: 10px;\n }\n\n .check-btn {\n background: #3b82f6;\n color: white;\n border: none;\n border-radius: 10px;\n padding: 12px 30px;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n transition: background 0.3s ease;\n }\n\n .check-btn:hover {\n background: #2563eb;\n }\n\n .check-btn:disabled {\n background: #94a3b8;\n cursor: not-allowed;\n }\n\n @media (max-width: 768px) {\n .cards-grid {\n grid-template-columns: 1fr;\n }\n\n .main-title {\n font-size: 32px;\n }\n\n .intro-text {\n font-size: 18px;\n }\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <div class=\"main-wrapper\">\n <div class=\"container\">\n <div class=\"header\">\n <h1 class=\"main-title\" id=\"mainTitle\">\u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf \u03c0\u03bf\u03bb\u03cd\u03c2 – \u03c0\u03bf\u03bb\u03bb\u03ae – \u03c0\u03bf\u03bb\u03cd \u03ba\u03b1\u03b9 \u0395\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 \u03c0\u03bf\u03bb\u03cd<\/h1>\n <p class=\"intro-text\" id=\"introText\">\u039c\u03ac\u03b8\u03b5 \u03c4\u03b7 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03ac \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03b5\u03c0\u03b9\u03b8\u03ad\u03c4\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b5\u03c0\u03b9\u03c1\u03c1\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2!<\/p>\n <\/div>\n <div class=\"theory-box\">\n <h2>\ud83d\udcda \u0398\u03b5\u03c9\u03c1\u03af\u03b1<\/h2>\n <p><strong>\u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf \u03c0\u03bf\u03bb\u03cd\u03c2 – \u03c0\u03bf\u03bb\u03bb\u03ae – \u03c0\u03bf\u03bb\u03cd:<\/strong> \u03a3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03c4\u03bf \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc \u03ba\u03b1\u03b9 \u03b4\u03b7\u03bb\u03ce\u03bd\u03b5\u03b9 \u03bc\u03b5\u03b3\u03ac\u03bb\u03b7 \u03c0\u03bf\u03c3\u03cc\u03c4\u03b7\u03c4\u03b1.<\/p>\n <div class=\"example\"><strong>\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong><br>\n \u2022 <em>\u03a0\u03bf\u03bb\u03bb\u03bf\u03af<\/em> \u03bc\u03b1\u03b8\u03b7\u03c4\u03ad\u03c2 (\u03b1\u03c1\u03c3\u03b5\u03bd\u03b9\u03ba\u03cc \u03c0\u03bb\u03b7\u03b8\u03c5\u03bd\u03c4\u03b9\u03ba\u03cc\u03c2)<br>\n \u2022 <em>\u03a0\u03bf\u03bb\u03bb\u03ad\u03c2<\/em> \u03b1\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 (\u03b8\u03b7\u03bb\u03c5\u03ba\u03cc \u03c0\u03bb\u03b7\u03b8\u03c5\u03bd\u03c4\u03b9\u03ba\u03cc\u03c2)<br>\n \u2022 <em>\u03a0\u03bf\u03bb\u03bb\u03ac<\/em> \u03b2\u03b9\u03b2\u03bb\u03af\u03b1 (\u03bf\u03c5\u03b4\u03ad\u03c4\u03b5\u03c1\u03bf \u03c0\u03bb\u03b7\u03b8\u03c5\u03bd\u03c4\u03b9\u03ba\u03cc\u03c2)\n <\/div>\n <p><strong>\u0395\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 \u03c0\u03bf\u03bb\u03cd:<\/strong> \u03a3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03c4\u03bf \u03c1\u03ae\u03bc\u03b1, \u03c4\u03bf \u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf \u03ae \u03ac\u03bb\u03bb\u03bf \u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 \u03ba\u03b1\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03bc\u03b5\u03c4\u03ac\u03b2\u03bb\u03b7\u03c4\u03bf.<\/p>\n <div class=\"example\"><strong>\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong><br>\n \u2022 \u0394\u03b9\u03b1\u03b2\u03ac\u03b6\u03c9 <em>\u03c0\u03bf\u03bb\u03cd<\/em> (\u03c3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03c1\u03ae\u03bc\u03b1)<br>\n \u2022 \u0395\u03af\u03bd\u03b1\u03b9 <em>\u03c0\u03bf\u03bb\u03cd<\/em> \u03cc\u03bc\u03bf\u03c1\u03c6\u03bf\u03c2 (\u03c3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf)<br>\n \u2022 \u03a4\u03c1\u03ad\u03c7\u03b5\u03b9 <em>\u03c0\u03bf\u03bb\u03cd<\/em> \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1 (\u03c3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1)\n <\/div>\n <\/div>\n <div class=\"cards-grid\">\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"card-icon\">\ud83c\udfaf<\/span> \u0395\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7 1\n <\/div>\n <div class=\"question\">\n \u03a3\u03c4\u03b7\u03bd \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 “\u0395\u03af\u03b4\u03b1 <strong>\u03c0\u03bf\u03bb\u03bb\u03bf\u03cd\u03c2<\/strong> \u03b1\u03bd\u03b8\u03c1\u03ce\u03c0\u03bf\u03c5\u03c2”, \u03b7 \u03bb\u03ad\u03be\u03b7 “\u03c0\u03bf\u03bb\u03bb\u03bf\u03cd\u03c2” \u03b5\u03af\u03bd\u03b1\u03b9:\n <\/div>\n <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(1, '\u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf', this)\">\u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(1, '\u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1', this)\">\u0395\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback1\"><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"card-icon\">\ud83c\udfaf<\/span> \u0395\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7 2\n <\/div>\n <div class=\"question\">\n \u03a3\u03c4\u03b7\u03bd \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 “\u039a\u03bf\u03b9\u03bc\u03ac\u03bc\u03b1\u03b9 <strong>\u03c0\u03bf\u03bb\u03cd<\/strong> \u03b1\u03c1\u03b3\u03ac”, \u03b7 \u03bb\u03ad\u03be\u03b7 “\u03c0\u03bf\u03bb\u03cd” \u03b5\u03af\u03bd\u03b1\u03b9:\n <\/div>\n <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(2, '\u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf', this)\">\u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(2, '\u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1', this)\">\u0395\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback2\"><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"card-icon\">\u270d\ufe0f<\/span> \u0386\u03c3\u03ba\u03b7\u03c3\u03b7 3\n <\/div>\n <div class=\"question\">\n \u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03bf \u03ba\u03b5\u03bd\u03cc \u03bc\u03b5 \u03c4\u03b7 \u03c3\u03c9\u03c3\u03c4\u03ae \u03bc\u03bf\u03c1\u03c6\u03ae:<br>\n “\u0388\u03c6\u03b1\u03b3\u03b1 ______ \u03bc\u03ae\u03bb\u03b1.”\n <\/div><input type=\"text\" class=\"fill-input\" id=\"input3\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5...\"> <button class=\"check-btn\" onclick=\"checkFillAnswer(3, ['\u03c0\u03bf\u03bb\u03bb\u03ac'], 'input3')\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <div class=\"feedback\" id=\"feedback3\"><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"card-icon\">\ud83c\udfaf<\/span> \u0395\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7 4\n <\/div>\n <div class=\"question\">\n \u03a0\u03bf\u03b9\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae;\n <\/div>\n <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(4, 'A', this)\">\u0391) \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03cc\u03c2 \u03bc\u03b1\u03b8\u03b7\u03c4\u03ae\u03c2<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(4, 'B', this)\">\u0392) \u0395\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03bb\u03bf\u03af \u03ba\u03b1\u03bb\u03cc\u03c2 \u03bc\u03b1\u03b8\u03b7\u03c4\u03ae\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback4\"><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"card-icon\">\u270d\ufe0f<\/span> \u0386\u03c3\u03ba\u03b7\u03c3\u03b7 5\n <\/div>\n <div class=\"question\">\n \u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03bf \u03ba\u03b5\u03bd\u03cc:<br>\n “\u0397 \u03b4\u03b1\u03c3\u03ba\u03ac\u03bb\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 ______ \u03b1\u03c5\u03c3\u03c4\u03b7\u03c1\u03ae.”\n <\/div><input type=\"text\" class=\"fill-input\" id=\"input5\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5...\"> <button class=\"check-btn\" onclick=\"checkFillAnswer(5, ['\u03c0\u03bf\u03bb\u03cd'], 'input5')\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <div class=\"feedback\" id=\"feedback5\"><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"card-icon\">\ud83c\udfaf<\/span> \u0395\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7 6\n <\/div>\n <div class=\"question\">\n \u03a3\u03c4\u03b7\u03bd \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 “\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 <strong>\u03c0\u03bf\u03bb\u03bb\u03ac<\/strong> \u03b2\u03b9\u03b2\u03bb\u03af\u03b1”, \u03b7 \u03bb\u03ad\u03be\u03b7 “\u03c0\u03bf\u03bb\u03bb\u03ac” \u03c3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9:\n <\/div>\n <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(6, '\u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc', this)\">\u03a4\u03bf \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc “\u03b2\u03b9\u03b2\u03bb\u03af\u03b1”<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(6, '\u03c1\u03ae\u03bc\u03b1', this)\">\u03a4\u03bf \u03c1\u03ae\u03bc\u03b1 “\u03b4\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1”<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback6\"><\/div>\n <\/div>\n <\/div>\n <div class=\"score-box\">\n <div class=\"score-text\">\n \u0397 \u0395\u03c0\u03af\u03b4\u03bf\u03c3\u03ae \u03c3\u03bf\u03c5:\n <\/div>\n <div class=\"score-number\" id=\"scoreDisplay\">\n 0 \/ 6\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const defaultConfig = {\n main_title: \"\u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf \u03c0\u03bf\u03bb\u03cd\u03c2 - \u03c0\u03bf\u03bb\u03bb\u03ae - \u03c0\u03bf\u03bb\u03cd \u03ba\u03b1\u03b9 \u0395\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 \u03c0\u03bf\u03bb\u03cd\",\n intro_text: \"\u039c\u03ac\u03b8\u03b5 \u03c4\u03b7 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03ac \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03b5\u03c0\u03b9\u03b8\u03ad\u03c4\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b5\u03c0\u03b9\u03c1\u03c1\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2!\"\n };\n\n let config = { ...defaultConfig };\n let score = 0;\n const totalQuestions = 6;\n const answeredQuestions = new Set();\n\n const correctAnswers = {\n 1: '\u03b5\u03c0\u03af\u03b8\u03b5\u03c4\u03bf',\n 2: '\u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1',\n 4: 'A',\n 6: '\u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc'\n };\n\n function checkAnswer(questionNum, answer, button) {\n if (answeredQuestions.has(questionNum)) return;\n\n const feedback = document.getElementById(`feedback${questionNum}`);\n const buttons = button.parentElement.querySelectorAll('.option-btn');\n \n buttons.forEach(btn => btn.disabled = true);\n\n if (answer === correctAnswers[questionNum]) {\n button.classList.add('correct');\n feedback.className = 'feedback correct show';\n feedback.textContent = '\u2705 \u039c\u03c0\u03c1\u03ac\u03b2\u03bf! \u03a3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7!';\n score++;\n } else {\n button.classList.add('incorrect');\n feedback.className = 'feedback incorrect show';\n feedback.textContent = '\u274c \u039b\u03ac\u03b8\u03bf\u03c2! \u03a0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b7\u03c3\u03b5 \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03ac\u03b2\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1\u03c4\u03af.';\n }\n\n answeredQuestions.add(questionNum);\n updateScore();\n }\n\n function checkFillAnswer(questionNum, correctAnswers, inputId) {\n if (answeredQuestions.has(questionNum)) return;\n\n const input = document.getElementById(inputId);\n const feedback = document.getElementById(`feedback${questionNum}`);\n const userAnswer = input.value.trim().toLowerCase();\n\n input.disabled = true;\n const button = input.nextElementSibling;\n button.disabled = true;\n\n if (correctAnswers.some(ans => userAnswer === ans.toLowerCase())) {\n feedback.className = 'feedback correct show';\n feedback.textContent = '\u2705 \u03a3\u03c9\u03c3\u03c4\u03ac! \u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \"' + correctAnswers[0] + '\"!';\n score++;\n } else {\n feedback.className = 'feedback incorrect show';\n feedback.textContent = '\u274c \u0397 \u03c3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \"' + correctAnswers[0] + '\".';\n }\n\n answeredQuestions.add(questionNum);\n updateScore();\n }\n\n function updateScore() {\n document.getElementById('scoreDisplay').textContent = `${score} \/ ${totalQuestions}`;\n }\n\n async function onConfigChange(newConfig) {\n config = { ...newConfig };\n document.getElementById('mainTitle').textContent = config.main_title || defaultConfig.main_title;\n document.getElementById('introText').textContent = config.intro_text || defaultConfig.intro_text;\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig: defaultConfig,\n onConfigChange: onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"intro_text\", config.intro_text || defaultConfig.intro_text]\n ])\n });\n }\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b5b44f541126f67',t:'MTc2NzAzMTk4NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u03c0\u03b7\u03b3\u03ae : https:\/\/kokologos.sites.sch.gr\/ \u0395\u03c0\u03af\u03b8\u03b5\u03c4\u03bf \u03c0\u03bf\u03bb\u03cd\u03c2, \u03c0\u03bf\u03bb\u03bb\u03ae, \u03c0\u03bf\u03bb\u03cd-\u03b5\u03c0\u03af\u03c1\u03c1\u03b7\u03bc\u03b1 \u03c0\u03bf\u03bb\u03cd \u0393\u03b9\u03b1 \u03b5\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7 \u03b5\u03b4\u03ce \u03c0\u03b7\u03b3\u03ae : https:\/\/blogs.sch.gr\/ifstamou\/ . . \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a0\u03bf\u03bb\u03cd\u03c2 – \u03a0\u03bf\u03bb\u03cd \ud83c\udf93 \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u0393\u03bb\u03ce\u03c3\u03c3\u03b1\u03c2 \ud83c\udf93 \u03a0\u03bf\u03bb\u03cd\u03c2 – \u03a0\u03bf\u03bb\u03bb\u03ae – \u03a0\u03bf\u03bb\u03cd & \u03a0\u03bf\u03bb\u03cd \ud83d\udcdd \u0395\u03a0\u0399\u0398\u0395\u03a4\u039f: \u03a0\u03bf\u03bb\u03cd\u03c2 – \u03a0\u03bf\u03bb\u03bb\u03ae – \u03a0\u03bf\u03bb\u03cd \u03a3\u03c5\u03bd\u03bf\u03b4\u03b5\u03cd\u03b5\u03b9 \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03c3\u03b5 \u03b3\u03ad\u03bd\u03bf\u03c2, \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03ba\u03b1\u03b9 \u03c0\u03c4\u03ce\u03c3\u03b7! \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1: \u0388\u03c7\u03c9 \u03c0\u03bf\u03bb\u03bb\u03ac \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1 (\u03c3\u03c5\u03bc\u03c6\u03c9\u03bd\u03b5\u03af \u03bc\u03b5 “\u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1”) \u03a5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd … <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4691\" class=\"more-link\">\u0394\u03b9\u03b1\u03b2\u03ac\u03c3\u03c4\u03b5 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<span class=\"screen-reader-text\"> “\u0392\u03b9\u03b2\u03bb\u03b9\u03bf\u03b8\u03ae\u03ba\u03b5\u03c2”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4691","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"nikos","author_link":"https:\/\/prokopidis.sites.sch.gr\/?author=1"},"_links":{"self":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4691"}],"version-history":[{"count":5,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4691\/revisions"}],"predecessor-version":[{"id":5665,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4691\/revisions\/5665"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}