AI Tutor – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Comfortaa:wght@300;500;700&display=swap');\n \n body {\n font-family: 'Comfortaa', cursive;\n background-color: #f0f9ff;\n }\n .chat-container {\n height: 400px;\n overflow-y: auto;\n }\n .message {\n margin-bottom: 12px;\n padding: 10px 15px;\n border-radius: 15px;\n max-width: 80%;\n }\n .user-message {\n background-color: #dcf8c6;\n align-self: flex-end;\n margin-left: auto;\n }\n .ai-message {\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n }\n .theory-card {\n background: linear-gradient(135deg, #60a5fa, #3b82f6);\n color: white;\n }\n <\/style>\n<\/head>\n<body class=\"p-4\">\n\n <div class=\"max-w-2xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-blue-200\">\n \n <div class=\"theory-card p-6 text-center\">\n <h1 class=\"text-2xl font-bold\">\ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0394\u03ac\u03c3\u03ba\u03b1\u03bb\u03bf\u03c2<\/h1>\n <p class=\"text-sm opacity-90\">\u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af & \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 – \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/p>\n <\/div>\n\n \n <div class=\"flex bg-blue-50 p-2 gap-2 overflow-x-auto\">\n <button onclick=\"showTheory('decimals')\" class=\"bg-white px-4 py-2 rounded-full text-xs font-bold shadow-sm hover:bg-blue-100 transition\">\ud83d\udd22 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af<\/button>\n <button onclick=\"showTheory('fractions')\" class=\"bg-white px-4 py-2 rounded-full text-xs font-bold shadow-sm hover:bg-blue-100 transition\">\ud83c\udf70 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1<\/button>\n <button onclick=\"showTheory('placeValue')\" class=\"bg-white px-4 py-2 rounded-full text-xs font-bold shadow-sm hover:bg-blue-100 transition\">\ud83d\udccd \u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2<\/button>\n <\/div>\n\n \n <div id=\"chatWindow\" class=\"chat-container p-4 bg-gray-50 flex flex-col\">\n <div class=\"message ai-message\">\n \u0393\u03b5\u03b9\u03b1 \u03c3\u03bf\u03c5! \u0395\u03af\u03bc\u03b1\u03b9 \u03bf \u03b2\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03bf\u03c5 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac. \u03a1\u03ce\u03c4\u03b7\u03c3\u03ad \u03bc\u03b5 \u03cc,\u03c4\u03b9 \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03ae \u03c4\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1! \n <br><small class=\"text-gray-400\">\u039c\u03b7\u03bd \u03b1\u03bd\u03b7\u03c3\u03c5\u03c7\u03b5\u03af\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1, \u03c3\u03b5 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03b2\u03b1\u03af\u03bd\u03c9!<\/small>\n <\/div>\n <\/div>\n\n \n <div class=\"p-4 border-t border-gray-100 bg-white\">\n <div class=\"flex gap-2\">\n <input type=\"text\" id=\"userInput\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5 \u03b5\u03b4\u03ce...\" \n class=\"flex-1 p-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400\">\n <button onclick=\"handleSendMessage()\" id=\"sendBtn\" \n class=\"bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 transition shadow-md\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"theoryModal\" class=\"fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center p-4 z-50\">\n <div class=\"bg-white rounded-2xl max-w-lg w-full p-6 relative\">\n <button onclick=\"closeTheory()\" class=\"absolute top-4 right-4 text-gray-500 hover:text-black text-2xl\">×<\/button>\n <div id=\"theoryContent\" class=\"prose\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n const apiKey = \"AIzaSyAww5b0mgRJH7TNZBgm_VgC6TNaH0n5w9I\"; \/\/ \u039f \u03ba\u03c9\u03b4\u03b9\u03ba\u03cc\u03c2 \u03c0\u03b1\u03c1\u03ad\u03c7\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03c0\u03b5\u03c1\u03b9\u03b2\u03ac\u03bb\u03bb\u03bf\u03bd \u03b5\u03ba\u03c4\u03ad\u03bb\u03b5\u03c3\u03b7\u03c2\n const chatWindow = document.getElementById('chatWindow');\n const userInput = document.getElementById('userInput');\n\n \/\/ \u03a0\u03c1\u03bf\u03ba\u03b1\u03b8\u03bf\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b7 \u0398\u03b5\u03c9\u03c1\u03af\u03b1\n const theoryData = {\n decimals: `\n <h2 class=\"text-xl font-bold text-blue-600 mb-2\">\u03a3\u03cd\u03b3\u03ba\u03c1\u03b9\u03c3\u03b7 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd<\/h2>\n <p>\u0393\u03b9\u03b1 \u03bd\u03b1 \u03c3\u03c5\u03b3\u03ba\u03c1\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03b4\u03cd\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2:<\/p>\n <ol class=\"list-decimal ml-5 mt-2\">\n <li>\u039a\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c4\u03bf <b>\u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2<\/b> (\u03b1\u03c5\u03c4\u03cc \u03c0\u03c1\u03b9\u03bd \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae). \u038c\u03c0\u03bf\u03b9\u03bf\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf, \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf\u03c2!<\/li>\n <li>\u0391\u03bd \u03c4\u03b1 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03af\u03b4\u03b9\u03b1, \u03ba\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c4\u03b1 <b>\u03b4\u03ad\u03ba\u03b1\u03c4\u03b1<\/b>, \u03bc\u03b5\u03c4\u03ac \u03c4\u03b1 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac \u03ba\u03bb\u03c0.<\/li>\n <\/ol>\n <p class=\"mt-2 bg-yellow-50 p-2 border-l-4 border-yellow-400 italic\">\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 5,4 > 5,39 \u03b5\u03c0\u03b5\u03b9\u03b4\u03ae \u03c4\u03bf 4 (\u03b4\u03ad\u03ba\u03b1\u03c4\u03b1) \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc \u03c4\u03bf 3.<\/p>\n `,\n fractions: `\n <h2 class=\"text-xl font-bold text-green-600 mb-2\">\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd<\/h2>\n <ul class=\"list-disc ml-5\">\n <li><b>\u038a\u03b4\u03b9\u03bf\u03b9 \u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ad\u03c2:<\/b> \u039c\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03bc\u03b5 \u03c4\u03bf\u03bd \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae. (\u03c0.\u03c7. 5\/8 > 3\/8)<\/li>\n <li><b>\u038a\u03b4\u03b9\u03bf\u03b9 \u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ad\u03c2:<\/b> \u039c\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03bc\u03b5 \u03c4\u03bf\u03bd <b>\u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf<\/b> \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae! (\u0393\u03b9\u03b1\u03c4\u03af \u03bc\u03bf\u03b9\u03c1\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b5 \u03bb\u03b9\u03b3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1).<\/li>\n <\/ul>\n `,\n placeValue: `\n <h2 class=\"text-xl font-bold text-purple-600 mb-2\">\u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2 \u03a8\u03b7\u03c6\u03af\u03bf\u03c5<\/h2>\n <p>\u03a3\u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc 12,<b>345<\/b>:<\/p>\n <ul class=\"list-disc ml-5\">\n <li>3 -> <b>\u0394\u03ad\u03ba\u03b1\u03c4\u03b1<\/b> (1\/10)<\/li>\n <li>4 -> <b>\u0395\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac<\/b> (1\/100)<\/li>\n <li>5 -> <b>\u03a7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac<\/b> (1\/1000)<\/li>\n <\/ul>\n `\n };\n\n function showTheory(type) {\n document.getElementById('theoryContent').innerHTML = theoryData[type];\n document.getElementById('theoryModal').style.display = 'flex';\n }\n\n function closeTheory() {\n document.getElementById('theoryModal').style.display = 'none';\n }\n\n \/\/ \u039b\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03b1\u03bd\u03b1\u03b3\u03bd\u03ce\u03c1\u03b9\u03c3\u03b7\u03c2 \u03bb\u03ad\u03be\u03b5\u03c9\u03bd-\u03ba\u03bb\u03b5\u03b9\u03b4\u03b9\u03ce\u03bd \u03bc\u03b5 \u03b1\u03bd\u03bf\u03c7\u03ae \u03c3\u03b5 \u03bb\u03ac\u03b8\u03b7 (Simple Fuzzy Match)\n function normalizeText(text) {\n return text.toLowerCase()\n .replace(\/[\u03ac\u03b1]\/g, '\u03b1').replace(\/[\u03ad\u03b5]\/g, '\u03b5').replace(\/[\u03ae\u03b7\u03af\u03b9\u03ca\u0390\u03cd\u03c5\u03cb\u03b0]\/g, '\u03b9').replace(\/[\u03cc\u03bf]\/g, '\u03bf').replace(\/[\u03ce\u03c9]\/g, '\u03bf')\n .replace(\/[^\u03b1-\u03c9a-z0-9\\s]\/g, '')\n .trim();\n }\n\n async function handleSendMessage() {\n const text = userInput.value.trim();\n if (!text) return;\n\n addMessage(text, 'user-message');\n userInput.value = '';\n \n const normalized = normalizeText(text);\n \n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03b3\u03b9\u03b1 \"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd\" \u03b1\u03ba\u03cc\u03bc\u03b1 \u03ba\u03b1\u03b9 \u03bc\u03b5 \u03bb\u03ac\u03b8\u03b7 (\u03c0.\u03c7. \u03b4\u03b9\u03b1\u03c4\u03b1\u03be\u03b9 \u03ba\u03bb\u03b1\u03c3\u03bc\u03b1\u03c4\u03bf\u03bd)\n if (normalized.includes('\u03b4\u03b9\u03b1\u03c4\u03b1\u03be\u03b9') && normalized.includes('\u03ba\u03bb\u03b1\u03c3\u03bc\u03b1\u03c4')) {\n setTimeout(() => {\n addMessage(\"\u03a6\u03b1\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c0\u03c9\u03c2 \u03c1\u03c9\u03c4\u03ac\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7 <b>\u03b4\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd<\/b>! <br><br> \u0398\u03c5\u03bc\u03ae\u03c3\u03bf\u03c5: \u0391\u03bd \u03ad\u03c7\u03bf\u03c5\u03bd \u03af\u03b4\u03b9\u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae, \u03ba\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c0\u03bf\u03b9\u03bf\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae. \u0391\u03bd \u03ad\u03c7\u03bf\u03c5\u03bd \u03af\u03b4\u03b9\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae, \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03bc\u03b5 \u03c4\u03bf\u03bd \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae!\", 'ai-message');\n }, 500);\n return;\n }\n\n \/\/ \u0391\u03bd \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03c5\u03c0\u03bf\u03c0\u03bf\u03b9\u03b7\u03bc\u03ad\u03bd\u03b7 \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7, \u03c0\u03ac\u03bc\u03b5 \u03c3\u03c4\u03bf AI\n await askAI(text);\n }\n\n function addMessage(text, className) {\n const div = document.createElement('div');\n div.className = `message ${className}`;\n div.innerHTML = text;\n chatWindow.appendChild(div);\n chatWindow.scrollTop = chatWindow.scrollHeight;\n }\n\n async function askAI(query) {\n const loadingMsg = document.createElement('div');\n loadingMsg.className = 'message ai-message italic text-gray-400';\n loadingMsg.innerText = '\u03a3\u03ba\u03ad\u03c6\u03c4\u03bf\u03bc\u03b1\u03b9...';\n chatWindow.appendChild(loadingMsg);\n\n const systemPrompt = `\n \u0395\u03af\u03c3\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c5\u03c0\u03bf\u03c3\u03c4\u03b7\u03c1\u03b9\u03ba\u03c4\u03b9\u03ba\u03cc\u03c2 \u03b4\u03ac\u03c3\u03ba\u03b1\u03bb\u03bf\u03c2 \u0395' \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd. \n \u0391\u03c0\u03b1\u03bd\u03c4\u03ac\u03c2 \u03c3\u03b5 \u03c0\u03b1\u03b9\u03b4\u03b9\u03ac 10-11 \u03b5\u03c4\u03ce\u03bd. \n \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 \u03b1\u03c0\u03bb\u03ac \u03bb\u03cc\u03b3\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1. \n \u0391\u03bd \u03c4\u03bf \u03c0\u03b1\u03b9\u03b4\u03af \u03ba\u03ac\u03bd\u03b5\u03b9 \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03ac \u03bb\u03ac\u03b8\u03b7, \u03bc\u03b7\u03bd \u03c4\u03bf \u03bc\u03b1\u03bb\u03ce\u03c3\u03b5\u03b9\u03c2, \u03b1\u03c0\u03bb\u03ce\u03c2 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b5 \u03c3\u03c9\u03c3\u03c4\u03ac \u03c3\u03c4\u03b7\u03bd \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03ae \u03c4\u03bf\u03c5.\n \u03a4\u03bf \u03b8\u03ad\u03bc\u03b1 \u03c3\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9: \u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd, \u03b1\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03c3\u03cd\u03b3\u03ba\u03c1\u03b9\u03c3\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd.\n `;\n\n let retries = 0;\n const maxRetries = 5;\n \n const callGemini = async () => {\n try {\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n contents: [{ parts: [{ text: query }] }],\n systemInstruction: { parts: [{ text: systemPrompt }] }\n })\n });\n \n if (!response.ok) throw new Error('API Error');\n const data = await response.json();\n chatWindow.removeChild(loadingMsg);\n addMessage(data.candidates[0].content.parts[0].text, 'ai-message');\n } catch (error) {\n if (retries < maxRetries) {\n retries++;\n setTimeout(callGemini, Math.pow(2, retries) * 1000);\n } else {\n chatWindow.removeChild(loadingMsg);\n addMessage(\"\u03a9\u03c7! \u039a\u03ac\u03c4\u03b9 \u03c0\u03ae\u03b3\u03b5 \u03c3\u03c4\u03c1\u03b1\u03b2\u03ac. \u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03be\u03b1\u03bd\u03ac \u03c3\u03b5 \u03bb\u03af\u03b3\u03bf.\", 'ai-message');\n }\n }\n };\n\n callGemini();\n }\n\n \/\/ Allow Enter key\n userInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') handleSendMessage();\n });\n <\/script>\n<\/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<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\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>\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9<\/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 body {\n font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial Rounded MT Bold', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 30px 20px;\n overflow-y: auto;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 40px;\n animation: slideDown 0.6s ease-out;\n }\n\n .header h1 {\n color: #ffffff;\n font-size: 42px;\n text-shadow: 3px 3px 6px rgba(0,0,0,0.3);\n margin-bottom: 10px;\n }\n\n .header p {\n color: #f0e6ff;\n font-size: 20px;\n font-weight: 500;\n }\n\n .glossary-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .term-card {\n background: white;\n border-radius: 20px;\n padding: 25px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n min-height: 280px;\n }\n\n .term-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 6px;\n background: linear-gradient(90deg, #ff6b6b, #feca57);\n }\n\n .term-card:nth-child(2n)::before {\n background: linear-gradient(90deg, #48dbfb, #0abde3);\n }\n\n .term-card:nth-child(3n)::before {\n background: linear-gradient(90deg, #1dd1a1, #10ac84);\n }\n\n .term-card:nth-child(4n)::before {\n background: linear-gradient(90deg, #ee5a6f, #c44569);\n }\n\n .term-card:hover {\n transform: translateY(-5px) scale(1.02);\n box-shadow: 0 12px 30px rgba(0,0,0,0.2);\n }\n\n .term-card.flipped .card-front {\n transform: rotateY(180deg);\n }\n\n .term-card.flipped .card-back {\n transform: rotateY(0deg);\n }\n\n .card-front, .card-back {\n transition: transform 0.6s;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n }\n\n .card-back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: rotateY(-180deg);\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n }\n\n .term-title {\n font-size: 24px;\n font-weight: bold;\n color: #2d3436;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .term-emoji {\n font-size: 32px;\n }\n\n .term-hint {\n color: #636e72;\n font-size: 14px;\n font-style: italic;\n margin-bottom: 15px;\n }\n\n .term-definition {\n color: #2d3436;\n font-size: 16px;\n line-height: 1.6;\n }\n\n .term-example {\n background: #f8f9fa;\n padding: 12px;\n border-radius: 10px;\n margin-top: 12px;\n border-left: 4px solid #feca57;\n }\n\n .term-example strong {\n color: #ff6b6b;\n display: block;\n margin-bottom: 5px;\n font-size: 14px;\n }\n\n .flip-instruction {\n text-align: center;\n color: #ffffff;\n font-size: 16px;\n margin-top: 20px;\n animation: pulse 2s infinite;\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n }\n\n @media (max-width: 768px) {\n .glossary-grid {\n grid-template-columns: 1fr;\n }\n\n .header h1 {\n font-size: 32px;\n }\n\n .term-card {\n padding: 20px;\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=\"container\">\n <div class=\"header\">\n <h1 id=\"main-title\">\ud83c\udf93 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9<\/h1>\n <p id=\"subtitle\">\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5<\/p>\n <\/div>\n <div class=\"glossary-grid\" id=\"glossaryGrid\"><\/div>\n <div class=\"flip-instruction\">\n \u2728 \u03a0\u03ac\u03c4\u03b1 \u03c0\u03ac\u03bd\u03c9 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03ba\u03ac\u03c1\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7! \u2728\n <\/div>\n <\/div>\n <script>\n const terms = [\n {\n title: \"\u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2\",\n emoji: \"\ud83d\udd22\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03ba\u03b1\u03b9 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2, \u03c7\u03c9\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b1 \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1 \u03ae \u03c4\u03b5\u03bb\u03b5\u03af\u03b1.\",\n example: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 3,75 (\u03c4\u03c1\u03af\u03b1 \u03ba\u03cc\u03bc\u03bc\u03b1 \u03b5\u03b2\u03b4\u03bf\u03bc\u03ae\u03bd\u03c4\u03b1 \u03c0\u03ad\u03bd\u03c4\u03b5)\"\n },\n {\n title: \"\u0391\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u039c\u03ad\u03c1\u03bf\u03c2\",\n emoji: \"\ud83c\udfaf\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 12,8 \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 12\"\n },\n {\n title: \"\u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u039c\u03ad\u03c1\u03bf\u03c2\",\n emoji: \"\ud83c\udf1f\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03b4\u03b5\u03be\u03b9\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 5,67 \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 67\"\n },\n {\n title: \"\u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2\",\n emoji: \"\ud83d\udccd\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03b1\u03be\u03af\u03b1 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03c8\u03b7\u03c6\u03af\u03bf \u03b1\u03bd\u03ac\u03bb\u03bf\u03b3\u03b1 \u03bc\u03b5 \u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03c3\u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 345, \u03c4\u03bf 3 \u03ad\u03c7\u03b5\u03b9 \u03b1\u03be\u03af\u03b1 300 (\u03b5\u03ba\u03b1\u03c4\u03bf\u03bd\u03c4\u03ac\u03b4\u03b5\u03c2)\"\n },\n {\n title: \"\u0394\u03ad\u03ba\u03b1\u03c4\u03b1\",\n emoji: \"\ud83e\udd47\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03bc\u03b5\u03c4\u03ac \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1. \u039a\u03ac\u03b8\u03b5 \u03bc\u03bf\u03bd\u03ac\u03b4\u03b1 \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 10 \u03b4\u03ad\u03ba\u03b1\u03c4\u03b1.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 2,3 \u03c4\u03bf 3 \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 3 \u03b4\u03ad\u03ba\u03b1\u03c4\u03b1 (3\/10)\"\n },\n {\n title: \"\u0395\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac\",\n emoji: \"\ud83e\udd48\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03bc\u03b5\u03c4\u03ac \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1. \ufffd\ufffd\u03ac\u03b8\u03b5 \u03b4\u03ad\u03ba\u03b1\u03c4\u03bf \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 10 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 4,56 \u03c4\u03bf 6 \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 6 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac (6\/100)\"\n },\n {\n title: \"\u03a7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac\",\n emoji: \"\ud83e\udd49\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03c4\u03c1\u03af\u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03bc\u03b5\u03c4\u03ac \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1. \u039a\u03ac\u03b8\u03b5 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03cc \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 10 \u03c7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 1,234 \u03c4\u03bf 4 \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 4 \u03c7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac (4\/1000)\"\n },\n {\n title: \"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u0391\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd\",\n emoji: \"\ud83d\udcca\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0392\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c3\u03b5 \u03c3\u03b5\u03b9\u03c1\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03c3\u03c4\u03bf\u03bd \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03ae \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf.\",\n example: \"\u0391\u03cd\u03be\u03bf\u03c5\u03c3\u03b1: 1,2 < 1,5 < 2,1 < 3,7\"\n }\n ];\n\n function createTermCard(term, index) {\n const card = document.createElement('div');\n card.className = 'term-card';\n card.style.animationDelay = `${index * 0.1}s`;\n \n card.innerHTML = `\n <div class=\"card-front\">\n <div class=\"term-title\">\n <span class=\"term-emoji\">${term.emoji}<\/span>\n <span>${term.title}<\/span>\n <\/div>\n <div class=\"term-hint\">${term.hint}<\/div>\n <\/div>\n <div class=\"card-back\">\n <div class=\"term-title\">\n <span class=\"term-emoji\">${term.emoji}<\/span>\n <span>${term.title}<\/span>\n <\/div>\n <div class=\"term-definition\">${term.definition}<\/div>\n <div class=\"term-example\">\n <strong>\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:<\/strong>\n ${term.example}\n <\/div>\n <\/div>\n `;\n\n card.addEventListener('click', function() {\n this.classList.toggle('flipped');\n });\n\n return card;\n }\n\n function renderGlossary() {\n const grid = document.getElementById('glossaryGrid');\n grid.innerHTML = '';\n terms.forEach((term, index) => {\n grid.appendChild(createTermCard(term, index));\n });\n }\n\n const defaultConfig = {\n main_title: \"\ud83c\udf93 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9\",\n subtitle: \"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5\",\n background_color: \"#667eea\",\n surface_color: \"#ffffff\",\n text_color: \"#2d3436\",\n primary_action_color: \"#ff6b6b\",\n secondary_action_color: \"#48dbfb\"\n };\n\n async function onConfigChange(config) {\n const mainTitle = config.main_title || defaultConfig.main_title;\n const subtitle = config.subtitle || defaultConfig.subtitle;\n const backgroundColor = config.background_color || defaultConfig.background_color;\n const surfaceColor = config.surface_color || defaultConfig.surface_color;\n const textColor = config.text_color || defaultConfig.text_color;\n const primaryActionColor = config.primary_action_color || defaultConfig.primary_action_color;\n const secondaryActionColor = config.secondary_action_color || defaultConfig.secondary_action_color;\n\n document.getElementById('main-title').textContent = mainTitle;\n document.getElementById('subtitle').textContent = subtitle;\n\n document.body.style.background = `linear-gradient(135deg, ${backgroundColor} 0%, ${primaryActionColor} 100%)`;\n\n const termCards = document.querySelectorAll('.term-card');\n termCards.forEach(card => {\n card.style.backgroundColor = surfaceColor;\n });\n\n const termTitles = document.querySelectorAll('.term-title');\n termTitles.forEach(title => {\n title.style.color = textColor;\n });\n\n const termDefinitions = document.querySelectorAll('.term-definition');\n termDefinitions.forEach(def => {\n def.style.color = textColor;\n });\n }\n\n function mapToCapabilities(config) {\n return {\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.surface_color || defaultConfig.surface_color,\n set: (value) => {\n config.surface_color = value;\n window.elementSdk.setConfig({ surface_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 get: () => config.primary_action_color || defaultConfig.primary_action_color,\n set: (value) => {\n config.primary_action_color = value;\n window.elementSdk.setConfig({ primary_action_color: value });\n }\n },\n {\n get: () => config.secondary_action_color || defaultConfig.secondary_action_color,\n set: (value) => {\n config.secondary_action_color = value;\n window.elementSdk.setConfig({ secondary_action_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n };\n }\n\n function mapToEditPanelValues(config) {\n return new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"subtitle\", config.subtitle || defaultConfig.subtitle]\n ]);\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n\n renderGlossary();\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:'9b757beb352a6f67',t:'MTc2NzMwNjg2Ni4wMDAwMDA='};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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<div style=\"position: relative; width: 100%; height: 0; padding-top: 56.2225%;\n padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;\n border-radius: 8px; will-change: transform;\">\n <iframe loading=\"lazy\" style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;\"\n src=\"https:\/\/www.canva.com\/design\/DAG9NlrmbcE\/7uMRp3pk0-HDfCmywF5u7w\/view?embed\" allowfullscreen=\"allowfullscreen\" allow=\"fullscreen\">\n <\/iframe>\n<\/div>\n<a href=\"https://www.canva.com/design/DAG9NlrmbcE/7uMRp3pk0-HDfCmywF5u7w/view?utm_content=DAG9NlrmbcE&utm_campaign=designshare&utm_medium=embeds&utm_source=link\" target=\"_blank\" rel=\"noopener\">Copy of \u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03a0\u03b1\u03c1\u03bf\u03c5\u03c3\u03af\u03b1\u03c3\u03b7 \u03b3\u03b9\u03b1 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c3\u03b5 WordPress<\/a> by \u039d\u03b9\u03ba\u03cc\u03bb\u03b1\u03bf\u03c2 \u03a0\u03c1\u03bf\u03ba\u03bf\u03c0\u03af\u03b4\u03b7\u03c2\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI Tutor – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0394\u03ac\u03c3\u03ba\u03b1\u03bb\u03bf\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af & \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 – \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \ud83d\udd22 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af \ud83c\udf70 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 \ud83d\udccd \u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2 \u0393\u03b5\u03b9\u03b1 \u03c3\u03bf\u03c5! \u0395\u03af\u03bc\u03b1\u03b9 \u03bf \u03b2\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03bf\u03c5 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac. \u03a1\u03ce\u03c4\u03b7\u03c3\u03ad \u03bc\u03b5 \u03cc,\u03c4\u03b9 \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03ae \u03c4\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1! \u039c\u03b7\u03bd \u03b1\u03bd\u03b7\u03c3\u03c5\u03c7\u03b5\u03af\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1, \u03c3\u03b5 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03b2\u03b1\u03af\u03bd\u03c9! × \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \ud83c\udf93 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 … <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4196\" 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\"> “\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\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-4196","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\/4196","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=4196"}],"version-history":[{"count":28,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4196\/revisions"}],"predecessor-version":[{"id":5851,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4196\/revisions\/5851"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4196,"date":"2024-07-11T20:54:43","date_gmt":"2024-07-11T20:54:43","guid":{"rendered":"https:\/\/prokopidis.sites.sch.gr\/?p=4196"},"modified":"2026-01-01T22:35:24","modified_gmt":"2026-01-01T22:35:24","slug":"4196","status":"publish","type":"post","link":"https:\/\/prokopidis.sites.sch.gr\/?p=4196","title":{"rendered":"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2"},"content":{"rendered":"\n\n\n\n \n \n AI Tutor – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Comfortaa:wght@300;500;700&display=swap');\n \n body {\n font-family: 'Comfortaa', cursive;\n background-color: #f0f9ff;\n }\n .chat-container {\n height: 400px;\n overflow-y: auto;\n }\n .message {\n margin-bottom: 12px;\n padding: 10px 15px;\n border-radius: 15px;\n max-width: 80%;\n }\n .user-message {\n background-color: #dcf8c6;\n align-self: flex-end;\n margin-left: auto;\n }\n .ai-message {\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n }\n .theory-card {\n background: linear-gradient(135deg, #60a5fa, #3b82f6);\n color: white;\n }\n <\/style>\n<\/head>\n<body class=\"p-4\">\n\n <div class=\"max-w-2xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-blue-200\">\n \n <div class=\"theory-card p-6 text-center\">\n <h1 class=\"text-2xl font-bold\">\ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0394\u03ac\u03c3\u03ba\u03b1\u03bb\u03bf\u03c2<\/h1>\n <p class=\"text-sm opacity-90\">\u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af & \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 – \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/p>\n <\/div>\n\n \n <div class=\"flex bg-blue-50 p-2 gap-2 overflow-x-auto\">\n <button onclick=\"showTheory('decimals')\" class=\"bg-white px-4 py-2 rounded-full text-xs font-bold shadow-sm hover:bg-blue-100 transition\">\ud83d\udd22 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af<\/button>\n <button onclick=\"showTheory('fractions')\" class=\"bg-white px-4 py-2 rounded-full text-xs font-bold shadow-sm hover:bg-blue-100 transition\">\ud83c\udf70 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1<\/button>\n <button onclick=\"showTheory('placeValue')\" class=\"bg-white px-4 py-2 rounded-full text-xs font-bold shadow-sm hover:bg-blue-100 transition\">\ud83d\udccd \u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2<\/button>\n <\/div>\n\n \n <div id=\"chatWindow\" class=\"chat-container p-4 bg-gray-50 flex flex-col\">\n <div class=\"message ai-message\">\n \u0393\u03b5\u03b9\u03b1 \u03c3\u03bf\u03c5! \u0395\u03af\u03bc\u03b1\u03b9 \u03bf \u03b2\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03bf\u03c5 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac. \u03a1\u03ce\u03c4\u03b7\u03c3\u03ad \u03bc\u03b5 \u03cc,\u03c4\u03b9 \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03ae \u03c4\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1! \n <br><small class=\"text-gray-400\">\u039c\u03b7\u03bd \u03b1\u03bd\u03b7\u03c3\u03c5\u03c7\u03b5\u03af\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1, \u03c3\u03b5 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03b2\u03b1\u03af\u03bd\u03c9!<\/small>\n <\/div>\n <\/div>\n\n \n <div class=\"p-4 border-t border-gray-100 bg-white\">\n <div class=\"flex gap-2\">\n <input type=\"text\" id=\"userInput\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5 \u03b5\u03b4\u03ce...\" \n class=\"flex-1 p-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400\">\n <button onclick=\"handleSendMessage()\" id=\"sendBtn\" \n class=\"bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 transition shadow-md\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"theoryModal\" class=\"fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center p-4 z-50\">\n <div class=\"bg-white rounded-2xl max-w-lg w-full p-6 relative\">\n <button onclick=\"closeTheory()\" class=\"absolute top-4 right-4 text-gray-500 hover:text-black text-2xl\">×<\/button>\n <div id=\"theoryContent\" class=\"prose\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n const apiKey = \"AIzaSyAww5b0mgRJH7TNZBgm_VgC6TNaH0n5w9I\"; \/\/ \u039f \u03ba\u03c9\u03b4\u03b9\u03ba\u03cc\u03c2 \u03c0\u03b1\u03c1\u03ad\u03c7\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03c0\u03b5\u03c1\u03b9\u03b2\u03ac\u03bb\u03bb\u03bf\u03bd \u03b5\u03ba\u03c4\u03ad\u03bb\u03b5\u03c3\u03b7\u03c2\n const chatWindow = document.getElementById('chatWindow');\n const userInput = document.getElementById('userInput');\n\n \/\/ \u03a0\u03c1\u03bf\u03ba\u03b1\u03b8\u03bf\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b7 \u0398\u03b5\u03c9\u03c1\u03af\u03b1\n const theoryData = {\n decimals: `\n <h2 class=\"text-xl font-bold text-blue-600 mb-2\">\u03a3\u03cd\u03b3\u03ba\u03c1\u03b9\u03c3\u03b7 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd<\/h2>\n <p>\u0393\u03b9\u03b1 \u03bd\u03b1 \u03c3\u03c5\u03b3\u03ba\u03c1\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03b4\u03cd\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2:<\/p>\n <ol class=\"list-decimal ml-5 mt-2\">\n <li>\u039a\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c4\u03bf <b>\u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2<\/b> (\u03b1\u03c5\u03c4\u03cc \u03c0\u03c1\u03b9\u03bd \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae). \u038c\u03c0\u03bf\u03b9\u03bf\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf, \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf\u03c2!<\/li>\n <li>\u0391\u03bd \u03c4\u03b1 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03af\u03b4\u03b9\u03b1, \u03ba\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c4\u03b1 <b>\u03b4\u03ad\u03ba\u03b1\u03c4\u03b1<\/b>, \u03bc\u03b5\u03c4\u03ac \u03c4\u03b1 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac \u03ba\u03bb\u03c0.<\/li>\n <\/ol>\n <p class=\"mt-2 bg-yellow-50 p-2 border-l-4 border-yellow-400 italic\">\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 5,4 > 5,39 \u03b5\u03c0\u03b5\u03b9\u03b4\u03ae \u03c4\u03bf 4 (\u03b4\u03ad\u03ba\u03b1\u03c4\u03b1) \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc \u03c4\u03bf 3.<\/p>\n `,\n fractions: `\n <h2 class=\"text-xl font-bold text-green-600 mb-2\">\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd<\/h2>\n <ul class=\"list-disc ml-5\">\n <li><b>\u038a\u03b4\u03b9\u03bf\u03b9 \u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ad\u03c2:<\/b> \u039c\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03bc\u03b5 \u03c4\u03bf\u03bd \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae. (\u03c0.\u03c7. 5\/8 > 3\/8)<\/li>\n <li><b>\u038a\u03b4\u03b9\u03bf\u03b9 \u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ad\u03c2:<\/b> \u039c\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03bc\u03b5 \u03c4\u03bf\u03bd <b>\u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf<\/b> \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae! (\u0393\u03b9\u03b1\u03c4\u03af \u03bc\u03bf\u03b9\u03c1\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b5 \u03bb\u03b9\u03b3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1).<\/li>\n <\/ul>\n `,\n placeValue: `\n <h2 class=\"text-xl font-bold text-purple-600 mb-2\">\u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2 \u03a8\u03b7\u03c6\u03af\u03bf\u03c5<\/h2>\n <p>\u03a3\u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc 12,<b>345<\/b>:<\/p>\n <ul class=\"list-disc ml-5\">\n <li>3 -> <b>\u0394\u03ad\u03ba\u03b1\u03c4\u03b1<\/b> (1\/10)<\/li>\n <li>4 -> <b>\u0395\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac<\/b> (1\/100)<\/li>\n <li>5 -> <b>\u03a7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac<\/b> (1\/1000)<\/li>\n <\/ul>\n `\n };\n\n function showTheory(type) {\n document.getElementById('theoryContent').innerHTML = theoryData[type];\n document.getElementById('theoryModal').style.display = 'flex';\n }\n\n function closeTheory() {\n document.getElementById('theoryModal').style.display = 'none';\n }\n\n \/\/ \u039b\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03b1\u03bd\u03b1\u03b3\u03bd\u03ce\u03c1\u03b9\u03c3\u03b7\u03c2 \u03bb\u03ad\u03be\u03b5\u03c9\u03bd-\u03ba\u03bb\u03b5\u03b9\u03b4\u03b9\u03ce\u03bd \u03bc\u03b5 \u03b1\u03bd\u03bf\u03c7\u03ae \u03c3\u03b5 \u03bb\u03ac\u03b8\u03b7 (Simple Fuzzy Match)\n function normalizeText(text) {\n return text.toLowerCase()\n .replace(\/[\u03ac\u03b1]\/g, '\u03b1').replace(\/[\u03ad\u03b5]\/g, '\u03b5').replace(\/[\u03ae\u03b7\u03af\u03b9\u03ca\u0390\u03cd\u03c5\u03cb\u03b0]\/g, '\u03b9').replace(\/[\u03cc\u03bf]\/g, '\u03bf').replace(\/[\u03ce\u03c9]\/g, '\u03bf')\n .replace(\/[^\u03b1-\u03c9a-z0-9\\s]\/g, '')\n .trim();\n }\n\n async function handleSendMessage() {\n const text = userInput.value.trim();\n if (!text) return;\n\n addMessage(text, 'user-message');\n userInput.value = '';\n \n const normalized = normalizeText(text);\n \n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03b3\u03b9\u03b1 \"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd\" \u03b1\u03ba\u03cc\u03bc\u03b1 \u03ba\u03b1\u03b9 \u03bc\u03b5 \u03bb\u03ac\u03b8\u03b7 (\u03c0.\u03c7. \u03b4\u03b9\u03b1\u03c4\u03b1\u03be\u03b9 \u03ba\u03bb\u03b1\u03c3\u03bc\u03b1\u03c4\u03bf\u03bd)\n if (normalized.includes('\u03b4\u03b9\u03b1\u03c4\u03b1\u03be\u03b9') && normalized.includes('\u03ba\u03bb\u03b1\u03c3\u03bc\u03b1\u03c4')) {\n setTimeout(() => {\n addMessage(\"\u03a6\u03b1\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c0\u03c9\u03c2 \u03c1\u03c9\u03c4\u03ac\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7 <b>\u03b4\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd<\/b>! <br><br> \u0398\u03c5\u03bc\u03ae\u03c3\u03bf\u03c5: \u0391\u03bd \u03ad\u03c7\u03bf\u03c5\u03bd \u03af\u03b4\u03b9\u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae, \u03ba\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c0\u03bf\u03b9\u03bf\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae. \u0391\u03bd \u03ad\u03c7\u03bf\u03c5\u03bd \u03af\u03b4\u03b9\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae, \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03bc\u03b5 \u03c4\u03bf\u03bd \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae!\", 'ai-message');\n }, 500);\n return;\n }\n\n \/\/ \u0391\u03bd \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03c5\u03c0\u03bf\u03c0\u03bf\u03b9\u03b7\u03bc\u03ad\u03bd\u03b7 \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7, \u03c0\u03ac\u03bc\u03b5 \u03c3\u03c4\u03bf AI\n await askAI(text);\n }\n\n function addMessage(text, className) {\n const div = document.createElement('div');\n div.className = `message ${className}`;\n div.innerHTML = text;\n chatWindow.appendChild(div);\n chatWindow.scrollTop = chatWindow.scrollHeight;\n }\n\n async function askAI(query) {\n const loadingMsg = document.createElement('div');\n loadingMsg.className = 'message ai-message italic text-gray-400';\n loadingMsg.innerText = '\u03a3\u03ba\u03ad\u03c6\u03c4\u03bf\u03bc\u03b1\u03b9...';\n chatWindow.appendChild(loadingMsg);\n\n const systemPrompt = `\n \u0395\u03af\u03c3\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c5\u03c0\u03bf\u03c3\u03c4\u03b7\u03c1\u03b9\u03ba\u03c4\u03b9\u03ba\u03cc\u03c2 \u03b4\u03ac\u03c3\u03ba\u03b1\u03bb\u03bf\u03c2 \u0395' \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd. \n \u0391\u03c0\u03b1\u03bd\u03c4\u03ac\u03c2 \u03c3\u03b5 \u03c0\u03b1\u03b9\u03b4\u03b9\u03ac 10-11 \u03b5\u03c4\u03ce\u03bd. \n \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 \u03b1\u03c0\u03bb\u03ac \u03bb\u03cc\u03b3\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1. \n \u0391\u03bd \u03c4\u03bf \u03c0\u03b1\u03b9\u03b4\u03af \u03ba\u03ac\u03bd\u03b5\u03b9 \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03ac \u03bb\u03ac\u03b8\u03b7, \u03bc\u03b7\u03bd \u03c4\u03bf \u03bc\u03b1\u03bb\u03ce\u03c3\u03b5\u03b9\u03c2, \u03b1\u03c0\u03bb\u03ce\u03c2 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b5 \u03c3\u03c9\u03c3\u03c4\u03ac \u03c3\u03c4\u03b7\u03bd \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03ae \u03c4\u03bf\u03c5.\n \u03a4\u03bf \u03b8\u03ad\u03bc\u03b1 \u03c3\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9: \u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd, \u03b1\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03c3\u03cd\u03b3\u03ba\u03c1\u03b9\u03c3\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd.\n `;\n\n let retries = 0;\n const maxRetries = 5;\n \n const callGemini = async () => {\n try {\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n contents: [{ parts: [{ text: query }] }],\n systemInstruction: { parts: [{ text: systemPrompt }] }\n })\n });\n \n if (!response.ok) throw new Error('API Error');\n const data = await response.json();\n chatWindow.removeChild(loadingMsg);\n addMessage(data.candidates[0].content.parts[0].text, 'ai-message');\n } catch (error) {\n if (retries < maxRetries) {\n retries++;\n setTimeout(callGemini, Math.pow(2, retries) * 1000);\n } else {\n chatWindow.removeChild(loadingMsg);\n addMessage(\"\u03a9\u03c7! \u039a\u03ac\u03c4\u03b9 \u03c0\u03ae\u03b3\u03b5 \u03c3\u03c4\u03c1\u03b1\u03b2\u03ac. \u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03be\u03b1\u03bd\u03ac \u03c3\u03b5 \u03bb\u03af\u03b3\u03bf.\", 'ai-message');\n }\n }\n };\n\n callGemini();\n }\n\n \/\/ Allow Enter key\n userInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') handleSendMessage();\n });\n <\/script>\n<\/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<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\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>\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9<\/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 body {\n font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial Rounded MT Bold', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 30px 20px;\n overflow-y: auto;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 40px;\n animation: slideDown 0.6s ease-out;\n }\n\n .header h1 {\n color: #ffffff;\n font-size: 42px;\n text-shadow: 3px 3px 6px rgba(0,0,0,0.3);\n margin-bottom: 10px;\n }\n\n .header p {\n color: #f0e6ff;\n font-size: 20px;\n font-weight: 500;\n }\n\n .glossary-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .term-card {\n background: white;\n border-radius: 20px;\n padding: 25px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n min-height: 280px;\n }\n\n .term-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 6px;\n background: linear-gradient(90deg, #ff6b6b, #feca57);\n }\n\n .term-card:nth-child(2n)::before {\n background: linear-gradient(90deg, #48dbfb, #0abde3);\n }\n\n .term-card:nth-child(3n)::before {\n background: linear-gradient(90deg, #1dd1a1, #10ac84);\n }\n\n .term-card:nth-child(4n)::before {\n background: linear-gradient(90deg, #ee5a6f, #c44569);\n }\n\n .term-card:hover {\n transform: translateY(-5px) scale(1.02);\n box-shadow: 0 12px 30px rgba(0,0,0,0.2);\n }\n\n .term-card.flipped .card-front {\n transform: rotateY(180deg);\n }\n\n .term-card.flipped .card-back {\n transform: rotateY(0deg);\n }\n\n .card-front, .card-back {\n transition: transform 0.6s;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n }\n\n .card-back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: rotateY(-180deg);\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n }\n\n .term-title {\n font-size: 24px;\n font-weight: bold;\n color: #2d3436;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .term-emoji {\n font-size: 32px;\n }\n\n .term-hint {\n color: #636e72;\n font-size: 14px;\n font-style: italic;\n margin-bottom: 15px;\n }\n\n .term-definition {\n color: #2d3436;\n font-size: 16px;\n line-height: 1.6;\n }\n\n .term-example {\n background: #f8f9fa;\n padding: 12px;\n border-radius: 10px;\n margin-top: 12px;\n border-left: 4px solid #feca57;\n }\n\n .term-example strong {\n color: #ff6b6b;\n display: block;\n margin-bottom: 5px;\n font-size: 14px;\n }\n\n .flip-instruction {\n text-align: center;\n color: #ffffff;\n font-size: 16px;\n margin-top: 20px;\n animation: pulse 2s infinite;\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n }\n\n @media (max-width: 768px) {\n .glossary-grid {\n grid-template-columns: 1fr;\n }\n\n .header h1 {\n font-size: 32px;\n }\n\n .term-card {\n padding: 20px;\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=\"container\">\n <div class=\"header\">\n <h1 id=\"main-title\">\ud83c\udf93 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9<\/h1>\n <p id=\"subtitle\">\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5<\/p>\n <\/div>\n <div class=\"glossary-grid\" id=\"glossaryGrid\"><\/div>\n <div class=\"flip-instruction\">\n \u2728 \u03a0\u03ac\u03c4\u03b1 \u03c0\u03ac\u03bd\u03c9 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03ba\u03ac\u03c1\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7! \u2728\n <\/div>\n <\/div>\n <script>\n const terms = [\n {\n title: \"\u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2\",\n emoji: \"\ud83d\udd22\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03ba\u03b1\u03b9 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2, \u03c7\u03c9\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b1 \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1 \u03ae \u03c4\u03b5\u03bb\u03b5\u03af\u03b1.\",\n example: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 3,75 (\u03c4\u03c1\u03af\u03b1 \u03ba\u03cc\u03bc\u03bc\u03b1 \u03b5\u03b2\u03b4\u03bf\u03bc\u03ae\u03bd\u03c4\u03b1 \u03c0\u03ad\u03bd\u03c4\u03b5)\"\n },\n {\n title: \"\u0391\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u039c\u03ad\u03c1\u03bf\u03c2\",\n emoji: \"\ud83c\udfaf\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 12,8 \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 12\"\n },\n {\n title: \"\u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u039c\u03ad\u03c1\u03bf\u03c2\",\n emoji: \"\ud83c\udf1f\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03b4\u03b5\u03be\u03b9\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 5,67 \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 67\"\n },\n {\n title: \"\u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2\",\n emoji: \"\ud83d\udccd\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03b1\u03be\u03af\u03b1 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03c8\u03b7\u03c6\u03af\u03bf \u03b1\u03bd\u03ac\u03bb\u03bf\u03b3\u03b1 \u03bc\u03b5 \u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03c3\u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 345, \u03c4\u03bf 3 \u03ad\u03c7\u03b5\u03b9 \u03b1\u03be\u03af\u03b1 300 (\u03b5\u03ba\u03b1\u03c4\u03bf\u03bd\u03c4\u03ac\u03b4\u03b5\u03c2)\"\n },\n {\n title: \"\u0394\u03ad\u03ba\u03b1\u03c4\u03b1\",\n emoji: \"\ud83e\udd47\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03bc\u03b5\u03c4\u03ac \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1. \u039a\u03ac\u03b8\u03b5 \u03bc\u03bf\u03bd\u03ac\u03b4\u03b1 \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 10 \u03b4\u03ad\u03ba\u03b1\u03c4\u03b1.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 2,3 \u03c4\u03bf 3 \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 3 \u03b4\u03ad\u03ba\u03b1\u03c4\u03b1 (3\/10)\"\n },\n {\n title: \"\u0395\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac\",\n emoji: \"\ud83e\udd48\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03bc\u03b5\u03c4\u03ac \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1. \ufffd\ufffd\u03ac\u03b8\u03b5 \u03b4\u03ad\u03ba\u03b1\u03c4\u03bf \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 10 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 4,56 \u03c4\u03bf 6 \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 6 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03ac (6\/100)\"\n },\n {\n title: \"\u03a7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac\",\n emoji: \"\ud83e\udd49\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0397 \u03c4\u03c1\u03af\u03c4\u03b7 \u03b8\u03ad\u03c3\u03b7 \u03bc\u03b5\u03c4\u03ac \u03c4\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1. \u039a\u03ac\u03b8\u03b5 \u03b5\u03ba\u03b1\u03c4\u03bf\u03c3\u03c4\u03cc \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 10 \u03c7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac.\",\n example: \"\u03a3\u03c4\u03bf\u03bd 1,234 \u03c4\u03bf 4 \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 4 \u03c7\u03b9\u03bb\u03b9\u03bf\u03c3\u03c4\u03ac (4\/1000)\"\n },\n {\n title: \"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u0391\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd\",\n emoji: \"\ud83d\udcca\",\n hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03b5\u03be\u03ae\u03b3\u03b7\u03c3\u03b7\",\n definition: \"\u0392\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c3\u03b5 \u03c3\u03b5\u03b9\u03c1\u03ac \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03c3\u03c4\u03bf\u03bd \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03ae \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf.\",\n example: \"\u0391\u03cd\u03be\u03bf\u03c5\u03c3\u03b1: 1,2 < 1,5 < 2,1 < 3,7\"\n }\n ];\n\n function createTermCard(term, index) {\n const card = document.createElement('div');\n card.className = 'term-card';\n card.style.animationDelay = `${index * 0.1}s`;\n \n card.innerHTML = `\n <div class=\"card-front\">\n <div class=\"term-title\">\n <span class=\"term-emoji\">${term.emoji}<\/span>\n <span>${term.title}<\/span>\n <\/div>\n <div class=\"term-hint\">${term.hint}<\/div>\n <\/div>\n <div class=\"card-back\">\n <div class=\"term-title\">\n <span class=\"term-emoji\">${term.emoji}<\/span>\n <span>${term.title}<\/span>\n <\/div>\n <div class=\"term-definition\">${term.definition}<\/div>\n <div class=\"term-example\">\n <strong>\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:<\/strong>\n ${term.example}\n <\/div>\n <\/div>\n `;\n\n card.addEventListener('click', function() {\n this.classList.toggle('flipped');\n });\n\n return card;\n }\n\n function renderGlossary() {\n const grid = document.getElementById('glossaryGrid');\n grid.innerHTML = '';\n terms.forEach((term, index) => {\n grid.appendChild(createTermCard(term, index));\n });\n }\n\n const defaultConfig = {\n main_title: \"\ud83c\udf93 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9\",\n subtitle: \"\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5\",\n background_color: \"#667eea\",\n surface_color: \"#ffffff\",\n text_color: \"#2d3436\",\n primary_action_color: \"#ff6b6b\",\n secondary_action_color: \"#48dbfb\"\n };\n\n async function onConfigChange(config) {\n const mainTitle = config.main_title || defaultConfig.main_title;\n const subtitle = config.subtitle || defaultConfig.subtitle;\n const backgroundColor = config.background_color || defaultConfig.background_color;\n const surfaceColor = config.surface_color || defaultConfig.surface_color;\n const textColor = config.text_color || defaultConfig.text_color;\n const primaryActionColor = config.primary_action_color || defaultConfig.primary_action_color;\n const secondaryActionColor = config.secondary_action_color || defaultConfig.secondary_action_color;\n\n document.getElementById('main-title').textContent = mainTitle;\n document.getElementById('subtitle').textContent = subtitle;\n\n document.body.style.background = `linear-gradient(135deg, ${backgroundColor} 0%, ${primaryActionColor} 100%)`;\n\n const termCards = document.querySelectorAll('.term-card');\n termCards.forEach(card => {\n card.style.backgroundColor = surfaceColor;\n });\n\n const termTitles = document.querySelectorAll('.term-title');\n termTitles.forEach(title => {\n title.style.color = textColor;\n });\n\n const termDefinitions = document.querySelectorAll('.term-definition');\n termDefinitions.forEach(def => {\n def.style.color = textColor;\n });\n }\n\n function mapToCapabilities(config) {\n return {\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.surface_color || defaultConfig.surface_color,\n set: (value) => {\n config.surface_color = value;\n window.elementSdk.setConfig({ surface_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 get: () => config.primary_action_color || defaultConfig.primary_action_color,\n set: (value) => {\n config.primary_action_color = value;\n window.elementSdk.setConfig({ primary_action_color: value });\n }\n },\n {\n get: () => config.secondary_action_color || defaultConfig.secondary_action_color,\n set: (value) => {\n config.secondary_action_color = value;\n window.elementSdk.setConfig({ secondary_action_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n };\n }\n\n function mapToEditPanelValues(config) {\n return new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"subtitle\", config.subtitle || defaultConfig.subtitle]\n ]);\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n\n renderGlossary();\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:'9b757beb352a6f67',t:'MTc2NzMwNjg2Ni4wMDAwMDA='};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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<div style=\"position: relative; width: 100%; height: 0; padding-top: 56.2225%;\n padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;\n border-radius: 8px; will-change: transform;\">\n <iframe loading=\"lazy\" style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;\"\n src=\"https:\/\/www.canva.com\/design\/DAG9NlrmbcE\/7uMRp3pk0-HDfCmywF5u7w\/view?embed\" allowfullscreen=\"allowfullscreen\" allow=\"fullscreen\">\n <\/iframe>\n<\/div>\n<a href=\"https://www.canva.com/design/DAG9NlrmbcE/7uMRp3pk0-HDfCmywF5u7w/view?utm_content=DAG9NlrmbcE&utm_campaign=designshare&utm_medium=embeds&utm_source=link\" target=\"_blank\" rel=\"noopener\">Copy of \u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03a0\u03b1\u03c1\u03bf\u03c5\u03c3\u03af\u03b1\u03c3\u03b7 \u03b3\u03b9\u03b1 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c3\u03b5 WordPress<\/a> by \u039d\u03b9\u03ba\u03cc\u03bb\u03b1\u03bf\u03c2 \u03a0\u03c1\u03bf\u03ba\u03bf\u03c0\u03af\u03b4\u03b7\u03c2\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI Tutor – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0394\u03ac\u03c3\u03ba\u03b1\u03bb\u03bf\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af & \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 – \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \ud83d\udd22 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03af \ud83c\udf70 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 \ud83d\udccd \u0391\u03be\u03af\u03b1 \u0398\u03ad\u03c3\u03b7\u03c2 \u0393\u03b5\u03b9\u03b1 \u03c3\u03bf\u03c5! \u0395\u03af\u03bc\u03b1\u03b9 \u03bf \u03b2\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03bf\u03c5 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac. \u03a1\u03ce\u03c4\u03b7\u03c3\u03ad \u03bc\u03b5 \u03cc,\u03c4\u03b9 \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03ae \u03c4\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1! \u039c\u03b7\u03bd \u03b1\u03bd\u03b7\u03c3\u03c5\u03c7\u03b5\u03af\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1, \u03c3\u03b5 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03b2\u03b1\u03af\u03bd\u03c9! × \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \ud83c\udf93 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 … <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4196\" 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\"> “\u0394\u03b9\u03ac\u03c4\u03b1\u03be\u03b7 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u2013 \u0391\u03be\u03af\u03b1 \u03b8\u03ad\u03c3\u03b7\u03c2 \u03c8\u03b7\u03c6\u03af\u03bf\u03c5 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\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-4196","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\/4196","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=4196"}],"version-history":[{"count":28,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4196\/revisions"}],"predecessor-version":[{"id":5851,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4196\/revisions\/5851"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}