\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b7 \u03c4\u03b7\u03c2 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\u03c2<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n body {\n background-color: #f0f4f8;\n color: #1e293b;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n }\n .card {\n background-color: white;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n transition: box-shadow 0.3s ease-in-out;\n }\n .card:hover {\n box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n }\n .btn {\n display: inline-block;\n padding: 0.6rem 1.2rem;\n border-radius: 0.5rem;\n font-weight: 600;\n text-align: center;\n transition: background-color 0.2s, transform 0.1s;\n cursor: pointer;\n user-select: none;\n }\n .btn-primary {\n background-color: #0ea5e9;\n color: white;\n }\n .btn-primary:hover {\n background-color: #0284c7;\n }\n .btn-primary:active {\n transform: scale(0.98);\n }\n .btn-secondary {\n background-color: #94a3b8;\n color: white;\n }\n .btn-secondary:hover {\n background-color: #64748b;\n }\n .btn-disabled {\n background-color: #cbd5e1;\n color: #64748b;\n cursor: not-allowed;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .call-stack-item {\n padding: 0.5rem;\n margin-top: 0.5rem;\n border-radius: 0.5rem;\n background-color: #e2e8f0;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n transform: translateX(-20px);\n }\n .call-stack-item.active {\n opacity: 1;\n transform: translateX(0);\n }\n <\/style>\n<\/head>\n<body class=\"p-4 sm:p-6 md:p-8\">\n <div class=\"max-w-7xl mx-auto space-y-8\">\n\n <header class=\"text-center\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-sky-700\">\u0395\u03be\u03b5\u03c1\u03b5\u03c5\u03bd\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae<\/h1>\n <p class=\"mt-2 text-lg text-slate-600\">\u039c\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03c0\u03c1\u03bf\u03c3\u03ad\u03b3\u03b3\u03b9\u03c3\u03b7 \u03c3\u03b5 \u03b8\u03b5\u03bc\u03b5\u03bb\u03b9\u03ce\u03b4\u03b5\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2 \u03c4\u03b7\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2.<\/p>\n <\/header>\n\n <main class=\"space-y-12\">\n <div class=\"card p-6\">\n <h2 class=\"text-2xl font-semibold text-slate-800 mb-2\">\u03a4\u03b9 \u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae;<\/h2>\n <p class=\"text-slate-600\">\n \u0397 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b9\u03c3\u03c7\u03c5\u03c1\u03ae \u03c4\u03b5\u03c7\u03bd\u03b9\u03ba\u03ae \u03cc\u03c0\u03bf\u03c5 \u03bc\u03b9\u03b1 \u03c3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03ba\u03b1\u03bb\u03b5\u03af \u03c4\u03bf\u03bd \u03b5\u03b1\u03c5\u03c4\u03cc \u03c4\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bb\u03cd\u03c3\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1. \u03a6\u03b1\u03bd\u03c4\u03b1\u03c3\u03c4\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b6\u03b5\u03c4\u03b5 \u03ad\u03bd\u03b1\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7: \u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7, \u03c0\u03bf\u03c5 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1, \u03ba\u03b1\u03b9 \u03bf\u03cd\u03c4\u03c9 \u03ba\u03b1\u03b8\u03b5\u03be\u03ae\u03c2. \u03a3\u03c4\u03b7\u03bd \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae, \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03c5\u03bc\u03b5 \u03ad\u03bd\u03b1 \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1 \u03c3\u03b5 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b1, \u03c0\u03b1\u03bd\u03bf\u03bc\u03bf\u03b9\u03cc\u03c4\u03c5\u03c0\u03b1 \u03c5\u03c0\u03bf-\u03c0\u03c1\u03bf\u03b2\u03bb\u03ae\u03bc\u03b1\u03c4\u03b1 \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03b1\u03c0\u03bb\u03ae, \u03b2\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7 \u03c0\u03bf\u03c5 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03bb\u03cd\u03c3\u03bf\u03c5\u03bc\u03b5 \u03ac\u03bc\u03b5\u03c3\u03b1.\n <\/p>\n <p class=\"text-slate-600\"><br>\n \u0397 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03ad\u03bd\u03b1 \u03c3\u03b5\u03c4 \u03b1\u03c0\u03cc \u03c1\u03c9\u03c3\u03b9\u03ba\u03ad\u03c2 \u03ba\u03bf\u03cd\u03ba\u03bb\u03b5\u03c2. \u039a\u03ac\u03b8\u03b5 \u03ba\u03bf\u03cd\u03ba\u03bb\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b7, \u03c0\u03b1\u03bd\u03bf\u03bc\u03bf\u03b9\u03cc\u03c4\u03c5\u03c0\u03b7 \u03ba\u03bf\u03cd\u03ba\u03bb\u03b1, \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c4\u03b7\u03bd \u03c4\u03b5\u03bb\u03b5\u03c5\u03c4\u03b1\u03af\u03b1, \u03b7 \u03bf\u03c0\u03bf\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03cd \u03bc\u03b9\u03ba\u03c1\u03ae \u03ba\u03b1\u03b9 \u03b4\u03b5\u03bd \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03af\u03c0\u03bf\u03c4\u03b1 \u03ac\u03bb\u03bb\u03bf.\n\n \u0391\u03c5\u03c4\u03cc \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03ba\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03cc\u03c2 \u03b1\u03bb\u03b3\u03cc\u03c1\u03b9\u03b8\u03bc\u03bf\u03c2:\n\n \u03a0\u03b1\u03af\u03c1\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1.\n\n \u03a4\u03bf \u03c3\u03c0\u03ac\u03b5\u03b9 \u03c3\u03b5 \u03ad\u03bd\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03c0\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03af\u03b4\u03b9\u03bf \u03bc\u03b5 \u03c4\u03bf \u03b1\u03c1\u03c7\u03b9\u03ba\u03cc.\n\n \u03a4\u03bf \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9 \u03b1\u03c5\u03c4\u03cc \u03be\u03b1\u03bd\u03ac \u03ba\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac, \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03b5\u03b9 \u03c3\u03b5 \u03ad\u03bd\u03b1 \u03c4\u03cc\u03c3\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc \u03ba\u03b1\u03b9 \u03b1\u03c0\u03bb\u03cc \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03c0\u03bf\u03c5 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03c4\u03bf \u03bb\u03cd\u03c3\u03b5\u03b9 \u03b1\u03bc\u03ad\u03c3\u03c9\u03c2. \u0391\u03c5\u03c4\u03cc \u03c4\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b2\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7.\n\n \u039c\u03b5 \u03b1\u03c5\u03c4\u03cc\u03bd \u03c4\u03bf\u03bd \u03c4\u03c1\u03cc\u03c0\u03bf, \u03c4\u03bf \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1 \u03bb\u03cd\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b2\u03ae\u03bc\u03b1-\u03b2\u03ae\u03bc\u03b1, \u03be\u03b5\u03ba\u03b9\u03bd\u03ce\u03bd\u03c4\u03b1\u03c2 \u03b1\u03c0\u03cc \u03c4\u03bf \u03c0\u03b9\u03bf \u03b1\u03c0\u03bb\u03cc.\n <\/p>\n\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n <div class=\"card p-6 flex flex-col\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-4\">\u03a4\u03bf \u03a4\u03c1\u03af\u03b3\u03c9\u03bd\u03bf Sierpinski<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u03a4\u03bf \u03a4\u03c1\u03af\u03b3\u03c9\u03bd\u03bf Sierpinski \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 \u03b5\u03bd\u03cc\u03c2 \u03c3\u03c7\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2 \u03c0\u03bf\u03c5 \u00ab\u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf\u03bd \u03b5\u03b1\u03c5\u03c4\u03cc \u03c4\u03bf\u03c5\u00bb.\n\n \u039e\u03b5\u03ba\u03b9\u03bd\u03ac\u03bc\u03b5 \u03bc\u03b5 \u03ad\u03bd\u03b1 \u03b1\u03c0\u03bb\u03cc \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03bf. \u039c\u03b5\u03c4\u03ac, \u03c4\u03bf \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b5 \u03c4\u03ad\u03c3\u03c3\u03b5\u03c1\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03b1 \u03ba\u03b1\u03b9 \u03b1\u03c6\u03b1\u03b9\u03c1\u03bf\u03cd\u03bc\u03b5 \u03c4\u03bf \u03bc\u03b5\u03c3\u03b1\u03af\u03bf. \u03a4\u03ce\u03c1\u03b1, \u03ad\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c4\u03c1\u03af\u03b1 \u03bc\u03b9\u03ba\u03c1\u03ac \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03c4\u03bf \u03ba\u03b1\u03b8\u03ad\u03bd\u03b1 \u03bc\u03bf\u03b9\u03ac\u03b6\u03b5\u03b9 \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03bc\u03b5 \u03c4\u03bf \u03b1\u03c1\u03c7\u03b9\u03ba\u03cc \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf.\n\n \u0397 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1 \u03b1\u03c5\u03c4\u03ae \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac \u03ba\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac, \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03ad\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03b1. \u0391\u03c5\u03c4\u03cc \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae: \u03b7 \u03b5\u03c0\u03b1\u03bd\u03ac\u03bb\u03b7\u03c8\u03b7 \u03c4\u03b7\u03c2 \u03af\u03b4\u03b9\u03b1\u03c2 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1\u03c2 \u03c3\u03b5 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b7 \u03ba\u03bb\u03af\u03bc\u03b1\u03ba\u03b1, \u03be\u03b1\u03bd\u03ac \u03ba\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac.\n\n \u0391\u03c5\u03be\u03ac\u03bd\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf \u00ab\u03b2\u03ac\u03b8\u03bf\u03c2\u00bb \u03c3\u03c4\u03b7\u03bd \u03b5\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ae, \u03b1\u03c0\u03bb\u03ac \u03b4\u03b5\u03af\u03c7\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b5\u03c2 \u03c6\u03bf\u03c1\u03ad\u03c2 \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c5\u03c4\u03ae \u03b7 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1. \u038c\u03c3\u03bf \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03c4\u03bf \u03b2\u03ac\u03b8\u03bf\u03c2, \u03c4\u03cc\u03c3\u03bf \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03bf \u00ab\u03b2\u03b1\u03b8\u03b9\u03ac\u00bb \u03b2\u03bb\u03ad\u03c0\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae.\n <\/p>\n <div class=\"flex-grow flex flex-col justify-center items-center\">\n <div class=\"w-full max-w-md bg-slate-100 rounded-lg p-2 my-4\">\n <canvas id=\"sierpinskiCanvas\"><\/canvas>\n <\/div>\n <div class=\"flex items-center justify-center gap-4\">\n <button id=\"sierpinski-decrement\" class=\"btn btn-secondary text-xl px-4 py-2\">–<\/button>\n <div class=\"text-center\">\n <span class=\"font-bold\">\u0392\u03ac\u03b8\u03bf\u03c2:<\/span>\n <span id=\"sierpinski-depth-label\" class=\"font-mono text-xl\">1<\/span>\n <\/div>\n <button id=\"sierpinski-increment\" class=\"btn btn-primary text-xl px-4 py-2\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card p-6 flex flex-col\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-4\">\u039f\u03b9 \u03a0\u03cd\u03c1\u03b3\u03bf\u03b9 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u0388\u03bd\u03b1 \u03ba\u03bb\u03b1\u03c3\u03b9\u03ba\u03cc \u03c0\u03b1\u03b6\u03bb \u03c0\u03bf\u03c5 \u03bb\u03cd\u03bd\u03b5\u03c4\u03b1\u03b9 \u03ba\u03bf\u03bc\u03c8\u03ac \u03bc\u03b5 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae. \u039f \u03c3\u03c4\u03cc\u03c7\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03c6\u03b5\u03c1\u03b8\u03bf\u03cd\u03bd \u03cc\u03bb\u03bf\u03b9 \u03bf\u03b9 \u03b4\u03af\u03c3\u03ba\u03bf\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03c3\u03c4\u03cd\u03bb\u03bf \u0391 \u03c3\u03c4\u03bf\u03bd \u0393, \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u0392 \u03c9\u03c2 \u03b2\u03bf\u03b7\u03b8\u03b7\u03c4\u03b9\u03ba\u03cc, \u03c7\u03c9\u03c1\u03af\u03c2 \u03c0\u03bf\u03c4\u03ad \u03ad\u03bd\u03b1\u03c2 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf\u03c2 \u03b4\u03af\u03c3\u03ba\u03bf\u03c2 \u03bd\u03b1 \u03bc\u03c0\u03b5\u03b9 \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf. \u0395\u03c0\u03b9\u03bb\u03ad\u03be\u03c4\u03b5 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03b4\u03af\u03c3\u03ba\u03c9\u03bd \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03ae\u03c3\u03c4\u03b5 \u03c4\u03b7\u03bd \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae \u03bb\u03cd\u03c3\u03b7.\n <\/p>\n <div class=\"flex-grow flex flex-col justify-center items-center\">\n <div class=\"w-full h-72 bg-slate-100 rounded-lg relative my-4\">\n <canvas id=\"hanoiCanvas\"><\/canvas>\n <\/div>\n <div class=\"flex flex-wrap items-center justify-center gap-4\">\n <div class=\"flex items-center gap-2\">\n <label for=\"num-disks\" class=\"font-bold\">\u0394\u03af\u03c3\u03ba\u03bf\u03b9:<\/label>\n <input type=\"range\" id=\"num-disks\" value=\"3\" min=\"1\" max=\"8\" class=\"w-24\">\n <span id=\"disk-count-label\" class=\"font-mono text-xl\">3<\/span>\n <\/div>\n <button id=\"start-hanoi\" class=\"btn btn-primary\">\u0388\u03bd\u03b1\u03c1\u03be\u03b7<\/button>\n <button id=\"reset-hanoi\" class=\"btn btn-secondary\">\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac<\/button>\n <\/div>\n <div id=\"hanoi-status\" class=\"mt-4 text-center h-10\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card p-6\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-2\">\u0397 \u0395\u03ba\u03c1\u03b7\u03ba\u03c4\u03b9\u03ba\u03ae \u0391\u03cd\u03be\u03b7\u03c3\u03b7 \u03c4\u03c9\u03bd \u039a\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u0397 \u03bf\u03bc\u03bf\u03c1\u03c6\u03b9\u03ac \u03c4\u03b7\u03c2 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae\u03c2 \u03bb\u03cd\u03c3\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03a0\u03cd\u03c1\u03b3\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9 \u03ba\u03c1\u03cd\u03b2\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03b5\u03ba\u03b8\u03b5\u03c4\u03b9\u03ba\u03ae \u03c0\u03bf\u03bb\u03c5\u03c0\u03bb\u03bf\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1. \u039f \u03b5\u03bb\u03ac\u03c7\u03b9\u03c3\u03c4\u03bf\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 $2^N – 1$, \u03cc\u03c0\u03bf\u03c5 \u039d \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c4\u03c9\u03bd \u03b4\u03af\u03c3\u03ba\u03c9\u03bd. \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03c4\u03b5 \u03c4\u03bf\u03bd \u03c0\u03b1\u03c1\u03b1\u03ba\u03ac\u03c4\u03c9 slider \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03af\u03c4\u03b5 \u03c0\u03ce\u03c2 \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c4\u03c9\u03bd \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd \u03b1\u03c5\u03be\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b4\u03c1\u03b1\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u03bc\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03b5\u03c0\u03b9\u03c0\u03bb\u03ad\u03bf\u03bd \u03b4\u03af\u03c3\u03ba\u03bf.\n <\/p>\n <div class=\"flex flex-col items-center gap-4 mt-4\">\n <div class=\"flex items-center gap-2\">\n <label for=\"moves-slider\" class=\"font-bold\">\u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u0394\u03af\u03c3\u03ba\u03c9\u03bd (N):<\/label>\n <input type=\"range\" id=\"moves-slider\" value=\"3\" min=\"1\" max=\"15\" class=\"w-48\">\n <span id=\"moves-count-label\" class=\"font-mono text-xl w-8 text-center\">3<\/span>\n <\/div>\n <p class=\"text-lg\">\u03a3\u03cd\u03bd\u03bf\u03bb\u03bf \u039a\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd: <span id=\"total-moves\" class=\"font-bold text-sky-600\">7<\/span><\/p>\n <\/div>\n <div class=\"chart-container mt-4\">\n <canvas id=\"hanoiMovesChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"card p-6\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-2\">\u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03c3\u03c4\u03bf \u03a0\u03b1\u03c1\u03b1\u03b3\u03bf\u03bd\u03c4\u03b9\u03ba\u03cc (N!)<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u039f \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc\u03c2 \u03c4\u03bf\u03c5 \u03c0\u03b1\u03c1\u03b1\u03b3\u03bf\u03bd\u03c4\u03b9\u03ba\u03bf\u03cd \u03b5\u03bd\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03ba\u03bb\u03b1\u03c3\u03b9\u03ba\u03cc \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 \u03c7\u03c1\u03ae\u03c3\u03b7\u03c2 \u03c4\u03b7\u03c2 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\u03c2. \u03a4\u03bf \u03c0\u03b1\u03c1\u03b1\u03b3\u03bf\u03bd\u03c4\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 N ($N!$) \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf \u03cc\u03bb\u03c9\u03bd \u03c4\u03c9\u03bd \u03b8\u03b5\u03c4\u03b9\u03ba\u03ce\u03bd \u03b1\u03ba\u03b5\u03c1\u03b1\u03af\u03c9\u03bd \u03bc\u03ad\u03c7\u03c1\u03b9 \u03c4\u03bf N. \u0393\u03b9\u03b1 \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1, $5! = 5 \\times 4 \\times 3 \\times 2 \\times 1 = 120$. \u039c\u03b9\u03b1 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03c4\u03bf \u03bb\u03cd\u03bd\u03b5\u03b9 \u03c9\u03c2 \u03b5\u03be\u03ae\u03c2: $N! = N \\times (N-1)!$. \u0397 \u03b2\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf $1! = 1$.\n <\/p>\n <div class=\"flex flex-col md:flex-row items-center justify-center gap-4 mt-4\">\n <div class=\"flex items-center gap-2\">\n <label for=\"factorial-input\" class=\"font-bold\">\u0395\u03b9\u03c3\u03ac\u03b3\u03b5\u03c4\u03b5 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc (N):<\/label>\n <input type=\"number\" id=\"factorial-input\" value=\"5\" min=\"0\" max=\"10\" class=\"w-20 px-2 py-1 border rounded-md text-center\">\n <\/div>\n <button id=\"calculate-factorial\" class=\"btn btn-primary\">\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc\u03c2<\/button>\n <\/div>\n <div class=\"mt-6 flex flex-col md:flex-row gap-8\">\n <div class=\"flex-1\">\n <h3 class=\"text-xl font-semibold text-slate-700 mb-2\">\u0391\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1:<\/h3>\n <div id=\"factorial-result\" class=\"text-3xl font-bold text-sky-600\">120<\/div>\n <\/div>\n <div class=\"flex-1\">\n <h3 class=\"text-xl font-semibold text-slate-700 mb-2\">\u0392\u03ae\u03bc\u03b1-\u03b2\u03ae\u03bc\u03b1 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae \u039a\u03bb\u03ae\u03c3\u03b7:<\/h3>\n <div id=\"factorial-call-stack\" class=\"flex flex-col-reverse items-start\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n\n \/\/ Sierpinski Triangle Logic\n const sierpinskiCanvas = document.getElementById('sierpinskiCanvas');\n const sCtx = sierpinskiCanvas.getContext('2d');\n let sierpinskiDepth = 1;\n\n const resizeSierpinski = () => {\n const container = sierpinskiCanvas.parentElement;\n const size = Math.min(container.clientWidth, 400);\n sierpinskiCanvas.width = size;\n sierpinskiCanvas.height = size * Math.sqrt(3) \/ 2;\n drawSierpinski();\n };\n\n const drawTriangle = (p1, p2, p3) => {\n sCtx.beginPath();\n sCtx.moveTo(p1.x, p1.y);\n sCtx.lineTo(p2.x, p2.y);\n sCtx.lineTo(p3.x, p3.y);\n sCtx.closePath();\n sCtx.fill();\n };\n\n const drawSierpinskiRecursive = (p1, p2, p3, depth) => {\n if (depth === 0) {\n drawTriangle(p1, p2, p3);\n return;\n }\n const p12 = { x: (p1.x + p2.x) \/ 2, y: (p1.y + p2.y) \/ 2 };\n const p23 = { x: (p2.x + p3.x) \/ 2, y: (p2.y + p3.y) \/ 2 };\n const p31 = { x: (p3.x + p1.x) \/ 2, y: (p3.y + p1.y) \/ 2 };\n\n drawSierpinskiRecursive(p1, p12, p31, depth - 1);\n drawSierpinskiRecursive(p12, p2, p23, depth - 1);\n drawSierpinskiRecursive(p31, p23, p3, depth - 1);\n };\n\n const drawSierpinski = () => {\n sCtx.clearRect(0, 0, sierpinskiCanvas.width, sierpinskiCanvas.height);\n sCtx.fillStyle = '#0ea5e9';\n const p1 = { x: sierpinskiCanvas.width \/ 2, y: 0 };\n const p2 = { x: 0, y: sierpinskiCanvas.height };\n const p3 = { x: sierpinskiCanvas.width, y: sierpinskiCanvas.height };\n drawSierpinskiRecursive(p1, p2, p3, sierpinskiDepth);\n };\n\n document.getElementById('sierpinski-increment').addEventListener('click', () => {\n if (sierpinskiDepth < 8) {\n sierpinskiDepth++;\n document.getElementById('sierpinski-depth-label').textContent = sierpinskiDepth;\n drawSierpinski();\n }\n });\n\n document.getElementById('sierpinski-decrement').addEventListener('click', () => {\n if (sierpinskiDepth > 0) {\n sierpinskiDepth--;\n document.getElementById('sierpinski-depth-label').textContent = sierpinskiDepth;\n drawSierpinski();\n }\n });\n\n \/\/ Towers of Hanoi Logic\n const hanoiCanvas = document.getElementById('hanoiCanvas');\n const hCtx = hanoiCanvas.getContext('2d');\n const numDisksSlider = document.getElementById('num-disks');\n const diskCountLabel = document.getElementById('disk-count-label');\n const startHanoiBtn = document.getElementById('start-hanoi');\n const resetHanoiBtn = document.getElementById('reset-hanoi');\n const hanoiStatus = document.getElementById('hanoi-status');\n\n let numDisks = 3;\n let towers = [];\n let isHanoiRunning = false;\n const diskColors = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#3b82f6', '#8b5cf6'];\n\n const resizeHanoi = () => {\n const container = hanoiCanvas.parentElement;\n hanoiCanvas.width = container.clientWidth;\n hanoiCanvas.height = container.clientHeight;\n if (!isHanoiRunning) setupHanoi();\n drawHanoi();\n };\n\n const setupHanoi = () => {\n isHanoiRunning = false;\n towers = [[], [], []];\n for (let i = numDisks; i > 0; i--) {\n towers[0].push(i);\n }\n hanoiStatus.textContent = \"\u03a0\u03b1\u03c4\u03ae\u03c3\u03c4\u03b5 '\u0388\u03bd\u03b1\u03c1\u03be\u03b7' \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03c4\u03b5.\";\n startHanoiBtn.classList.remove('btn-disabled');\n numDisksSlider.disabled = false;\n drawHanoi();\n };\n\n const drawHanoi = () => {\n hCtx.clearRect(0, 0, hanoiCanvas.width, hanoiCanvas.height);\n const towerWidth = 10;\n const towerHeight = hanoiCanvas.height * 0.8;\n const baseHeight = 15;\n const towerPositions = [hanoiCanvas.width * 0.2, hanoiCanvas.width * 0.5, hanoiCanvas.width * 0.8];\n const diskHeight = 15;\n const maxDiskWidth = hanoiCanvas.width * 0.25;\n\n hCtx.fillStyle = '#475569';\n hCtx.fillRect(0, hanoiCanvas.height - baseHeight, hanoiCanvas.width, baseHeight);\n\n towerPositions.forEach((posX, i) => {\n hCtx.fillRect(posX - towerWidth \/ 2, hanoiCanvas.height - baseHeight - towerHeight, towerWidth, towerHeight);\n hCtx.font = '16px sans-serif';\n hCtx.textAlign = 'center';\n hCtx.fillText(String.fromCharCode(65 + i), posX, hanoiCanvas.height - baseHeight - towerHeight - 5);\n\n towers[i].forEach((disk, j) => {\n const diskWidth = maxDiskWidth * (disk \/ numDisks);\n hCtx.fillStyle = diskColors[disk - 1 % diskColors.length];\n hCtx.fillRect(\n posX - diskWidth \/ 2,\n hanoiCanvas.height - baseHeight - (j + 1) * diskHeight,\n diskWidth,\n diskHeight\n );\n });\n });\n };\n\n numDisksSlider.addEventListener('input', (e) => {\n numDisks = parseInt(e.target.value);\n diskCountLabel.textContent = numDisks;\n setupHanoi();\n });\n\n resetHanoiBtn.addEventListener('click', setupHanoi);\n\n startHanoiBtn.addEventListener('click', async () => {\n if (isHanoiRunning) return;\n isHanoiRunning = true;\n startHanoiBtn.classList.add('btn-disabled');\n numDisksSlider.disabled = true;\n\n const moves = [];\n solveHanoiRecursive(numDisks, 0, 2, 1, moves);\n\n let moveCount = 0;\n for (const move of moves) {\n if (!isHanoiRunning) break;\n moveCount++;\n hanoiStatus.textContent = `\u039a\u03af\u03bd\u03b7\u03c3\u03b7 ${moveCount}: \u0391\u03c0\u03cc ${String.fromCharCode(65 + move.from)} \u03c0\u03c1\u03bf\u03c2 ${String.fromCharCode(65 + move.to)}`;\n const disk = towers[move.from].pop();\n towers[move.to].push(disk);\n drawHanoi();\n await new Promise(res => setTimeout(res, 400));\n }\n if (isHanoiRunning) {\n hanoiStatus.textContent = `\u039f\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03ce\u03b8\u03b7\u03ba\u03b5 \u03c3\u03b5 ${moves.length} \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2!`;\n } else {\n hanoiStatus.textContent = '\u0397 \u03b5\u03ba\u03c4\u03ad\u03bb\u03b5\u03c3\u03b7 \u03b4\u03b9\u03b1\u03ba\u03cc\u03c0\u03b7\u03ba\u03b5.';\n }\n isHanoiRunning = false;\n });\n\n resetHanoiBtn.addEventListener('click', () => {\n isHanoiRunning = false;\n setupHanoi();\n });\n\n const solveHanoiRecursive = (n, from, to, aux, moves) => {\n if (n === 1) {\n moves.push({ from, to });\n return;\n }\n solveHanoiRecursive(n - 1, from, aux, to, moves);\n moves.push({ from, to });\n solveHanoiRecursive(n - 1, aux, to, from, moves);\n };\n\n \/\/ Hanoi Moves Chart Logic\n const movesSlider = document.getElementById('moves-slider');\n const movesCountLabel = document.getElementById('moves-count-label');\n const totalMovesLabel = document.getElementById('total-moves');\n const hanoiChartCanvas = document.getElementById('hanoiMovesChart');\n let hanoiChart;\n\n const updateMovesChart = () => {\n const n = parseInt(movesSlider.value);\n movesCountLabel.textContent = n;\n const moves = BigInt(2) ** BigInt(n) - BigInt(1);\n totalMovesLabel.textContent = moves.toLocaleString('el-GR');\n\n const labels = [];\n const data = [];\n for (let i = 1; i <= n; i++) {\n labels.push(`N=${i}`);\n data.push(Number(BigInt(2) ** BigInt(i) - BigInt(1)));\n }\n\n if (hanoiChart) {\n hanoiChart.data.labels = labels;\n hanoiChart.data.datasets[0].data = data;\n hanoiChart.update();\n }\n };\n\n const createMovesChart = () => {\n const ctx = hanoiChartCanvas.getContext('2d');\n hanoiChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: [],\n datasets: [{\n label: '\u0395\u03bb\u03ac\u03c7\u03b9\u03c3\u03c4\u03b5\u03c2 \u039a\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2',\n data: [],\n backgroundColor: 'rgba(14, 165, 233, 0.6)',\n borderColor: 'rgba(14, 165, 233, 1)',\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n type: 'logarithmic',\n ticks: {\n callback: function(value, index, values) {\n if (value === 1000000) return \"1M\";\n if (value === 1000) return \"1K\";\n if (value === 1000000000) return \"1B\";\n return Number(value.toString()).toLocaleString('el-GR');\n }\n }\n }\n },\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += BigInt(context.parsed.y).toLocaleString('el-GR');\n }\n return label;\n }\n }\n }\n }\n }\n });\n updateMovesChart();\n };\n\n movesSlider.addEventListener('input', updateMovesChart);\n\n \/\/ Factorial Logic\n const factorialInput = document.getElementById('factorial-input');\n const calculateFactorialBtn = document.getElementById('calculate-factorial');\n const factorialResult = document.getElementById('factorial-result');\n const factorialCallStack = document.getElementById('factorial-call-stack');\n\n function factorialRecursive(n, stack) {\n stack.push(`\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc\u03c2 ${n}!`);\n if (n === 0) {\n stack.push('\u0392\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7: 0! = 1');\n return 1;\n }\n const result = n * factorialRecursive(n - 1, stack);\n \/\/ Fix: Corrected the template literal to avoid SyntaxError.\n stack.push(`\u0395\u03c0\u03b9\u03c3\u03c4\u03c1\u03bf\u03c6\u03ae: ${n} * ${n - 1}! = ${result}`);\n return result;\n }\n\n calculateFactorialBtn.addEventListener('click', () => {\n const n = parseInt(factorialInput.value);\n if (isNaN(n) || n < 0 || n > 10) {\n factorialResult.textContent = '\u039c\u03b7 \u03ad\u03b3\u03ba\u03c5\u03c1\u03b7 \u03b5\u03b9\u03c3\u03b1\u03b3\u03c9\u03b3\u03ae.';\n factorialCallStack.innerHTML = '';\n return;\n }\n\n factorialCallStack.innerHTML = '';\n const stack = [];\n const result = factorialRecursive(n, stack);\n\n factorialResult.textContent = result.toLocaleString('el-GR');\n\n stack.reverse().forEach((text, index) => {\n const div = document.createElement('div');\n div.className = 'call-stack-item';\n div.textContent = text;\n factorialCallStack.appendChild(div);\n setTimeout(() => {\n div.classList.add('active');\n }, index * 200);\n });\n });\n\n \/\/ Initializations\n new ResizeObserver(resizeSierpinski).observe(sierpinskiCanvas.parentElement);\n new ResizeObserver(resizeHanoi).observe(hanoiCanvas.parentElement);\n\n resizeSierpinski();\n setupHanoi();\n drawHanoi();\n createMovesChart();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color has-medium-font-size wp-elements-0b85c8927e96a4e21bc7741a6b22918c wp-block-paragraph\">\u03c4\u03ce\u03c1\u03b1 \u03c0\u03b1\u03af\u03be\u03b5 \u03bc\u03cc\u03bd\u03bf \u03c3\u03bf\u03c5!!!<\/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>\u039f\u03b9 \u03a0\u03cd\u03c1\u03b3\u03bf\u03b9 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n margin: 20px;\n background-color: #f0f0f0;\n }\n \n .game-container {\n max-width: 600px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n }\n \n .towers {\n display: flex;\n justify-content: space-around;\n margin: 30px 0;\n height: 200px;\n }\n \n .tower {\n width: 120px;\n height: 180px;\n border-bottom: 5px solid #333;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n }\n \n .tower::before {\n content: '';\n position: absolute;\n width: 10px;\n height: 180px;\n background-color: #333;\n bottom: 0;\n z-index: 1;\n }\n \n .disk {\n height: 20px;\n border-radius: 10px;\n margin: 2px 0;\n z-index: 2;\n position: relative;\n transition: all 0.3s ease;\n }\n \n .controls {\n margin: 20px 0;\n }\n \n button {\n padding: 10px 20px;\n margin: 5px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n \n button:hover {\n background-color: #45a049;\n }\n \n .disk-3 { width: 60px; background-color: #ff6b6b; }\n .disk-2 { width: 40px; background-color: #4ecdc4; }\n .disk-1 { width: 20px; background-color: #ffe66d; }\n \n .selected {\n box-shadow: 0 0 10px yellow;\n }\n \n #moves {\n font-weight: bold;\n margin: 10px 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <h1>\u039f\u03b9 \u03a0\u03cd\u03c1\u03b3\u03bf\u03b9 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9<\/h1>\n \n <div class=\"towers\">\n <div class=\"tower\" id=\"tower1\">\n <div class=\"disk disk-3\" data-size=\"3\"><\/div>\n <div class=\"disk disk-2\" data-size=\"2\"><\/div>\n <div class=\"disk disk-1\" data-size=\"1\"><\/div>\n <\/div>\n <div class=\"tower\" id=\"tower2\"><\/div>\n <div class=\"tower\" id=\"tower3\"><\/div>\n <\/div>\n \n <div id=\"moves\">\u039coves: 0<\/div>\n \n <div class=\"controls\">\n <button onclick=\"selectTower(1)\">\u03a0\u03cd\u03c1\u03b3\u03bf\u03c2 1<\/button>\n <button onclick=\"selectTower(2)\">\u03a0\u03cd\u03c1\u03b3\u03bf\u03c2 2<\/button>\n <button onclick=\"selectTower(3)\">\u03a0\u03cd\u03c1\u03b3\u03bf\u03c2 3<\/button>\n <button onclick=\"resetGame()\">\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac<\/button>\n <\/div>\n \n <p>\u039a\u03b1\u03bd\u03cc\u03bd\u03b5\u03c2: \u039c\u03b5\u03c4\u03b1\u03ba\u03b9\u03bd\u03ae\u03c3\u03c4\u03b5 \u03cc\u03bb\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03af\u03c3\u03ba\u03bf\u03c5\u03c2 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03c0\u03c1\u03ce\u03c4\u03bf \u03c3\u03c4\u03bf\u03bd \u03c4\u03c1\u03af\u03c4\u03bf \u03c0\u03cd\u03c1\u03b3\u03bf.<br>\n \u0394\u03b5\u03bd \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b4\u03afsko \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf.<\/p>\n <\/div>\n\n <script>\n let selectedTower = null;\n let moves = 0;\n const totalDisks = 3;\n \n function selectTower(towerNumber) {\n const tower = document.getElementById('tower' + towerNumber);\n const disks = tower.querySelectorAll('.disk');\n \n if (selectedTower === null) {\n \/\/ \u0395\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03c0\u03c1\u03ce\u03c4\u03bf\u03c5 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c5\n if (disks.length > 0) {\n selectedTower = towerNumber;\n tower.classList.add('selected');\n }\n } else {\n \/\/ \u0395\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf\u03c5 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c5 \u03b3\u03b9\u03b1 \u03bc\u03b5\u03c4\u03b1\u03ba\u03af\u03bd\u03b7\u03c3\u03b7\n if (selectedTower === towerNumber) {\n \/\/ \u0391\u03c0\u03bf\u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03b1\u03bd \u03c0\u03b1\u03c4\u03b7\u03b8\u03b5\u03af \u03bf \u03af\u03b4\u03b9\u03bf\u03c2 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c2\n document.getElementById('tower' + selectedTower).classList.remove('selected');\n selectedTower = null;\n } else {\n moveDisk(selectedTower, towerNumber);\n document.getElementById('tower' + selectedTower).classList.remove('selected');\n selectedTower = null;\n }\n }\n }\n \n function moveDisk(fromTower, toTower) {\n const from = document.getElementById('tower' + fromTower);\n const to = document.getElementById('tower' + toTower);\n \n const fromDisks = from.querySelectorAll('.disk');\n const toDisks = to.querySelectorAll('.disk');\n \n if (fromDisks.length === 0) return;\n \n const diskToMove = fromDisks[fromDisks.length - 1];\n const diskSize = parseInt(diskToMove.getAttribute('data-size'));\n \n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03ba\u03b1\u03bd\u03cc\u03bd\u03c9\u03bd\n if (toDisks.length > 0) {\n const topDiskSize = parseInt(toDisks[toDisks.length - 1].getAttribute('data-size'));\n if (diskSize > topDiskSize) {\n alert(\"\u0394\u03b5\u03bd \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b4\u03af\u03c3\u03ba\u03bf \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf!\");\n return;\n }\n }\n \n \/\/ \u039c\u03b5\u03c4\u03b1\u03ba\u03af\u03bd\u03b7\u03c3\u03b7 \u03b4\u03af\u03c3\u03ba\u03bf\u03c5\n from.removeChild(diskToMove);\n to.appendChild(diskToMove);\n \n moves++;\n document.getElementById('moves').textContent = 'Moves: ' + moves;\n \n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03af\u03ba\u03b7\n checkWin();\n }\n \n function checkWin() {\n const tower3 = document.getElementById('tower3');\n if (tower3.querySelectorAll('.disk').length === totalDisks) {\n setTimeout(() => {\n alert(`\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u03a4\u03b5\u03bb\u03b5\u03b9\u03ce\u03c3\u03b1\u03c4\u03b5 \u03c4\u03bf \u03c0\u03b1\u03b6\u03bb \u03c3\u03b5 ${moves} \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2!`);\n }, 100);\n }\n }\n \n function resetGame() {\n const tower1 = document.getElementById('tower1');\n const tower2 = document.getElementById('tower2');\n const tower3 = document.getElementById('tower3');\n \n \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03cc\u03bb\u03c9\u03bd \u03c4\u03c9\u03bd \u03b4\u03af\u03c3\u03ba\u03c9\u03bd\n tower2.innerHTML = '';\n tower3.innerHTML = '';\n \n \/\/ \u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03b4\u03af\u03c3\u03ba\u03c9\u03bd \u03c3\u03c4\u03bf\u03bd \u03c0\u03c1\u03ce\u03c4\u03bf \u03c0\u03cd\u03c1\u03b3\u03bf\n tower1.innerHTML = `\n <div class=\"disk disk-3\" data-size=\"3\"><\/div>\n <div class=\"disk disk-2\" data-size=\"2\"><\/div>\n <div class=\"disk disk-1\" data-size=\"1\"><\/div>\n `;\n \n moves = 0;\n selectedTower = null;\n document.getElementById('moves').textContent = 'Moves: 0';\n \n \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae\u03c2 \u03b1\u03c0\u03cc \u03cc\u03bb\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c5\u03c2\n document.querySelectorAll('.tower').forEach(tower => {\n tower.classList.remove('selected');\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b7 \u03c4\u03b7\u03c2 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\u03c2 \u0395\u03be\u03b5\u03c1\u03b5\u03c5\u03bd\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u039c\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03c0\u03c1\u03bf\u03c3\u03ad\u03b3\u03b3\u03b9\u03c3\u03b7 \u03c3\u03b5 \u03b8\u03b5\u03bc\u03b5\u03bb\u03b9\u03ce\u03b4\u03b5\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2 \u03c4\u03b7\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2. \u03a4\u03b9 \u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae; \u0397 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b9\u03c3\u03c7\u03c5\u03c1\u03ae \u03c4\u03b5\u03c7\u03bd\u03b9\u03ba\u03ae \u03cc\u03c0\u03bf\u03c5 \u03bc\u03b9\u03b1 \u03c3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03ba\u03b1\u03bb\u03b5\u03af \u03c4\u03bf\u03bd \u03b5\u03b1\u03c5\u03c4\u03cc \u03c4\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bb\u03cd\u03c3\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1. \u03a6\u03b1\u03bd\u03c4\u03b1\u03c3\u03c4\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b6\u03b5\u03c4\u03b5 \u03ad\u03bd\u03b1\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7: \u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7, \u03c0\u03bf\u03c5 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1, \u03ba\u03b1\u03b9 \u03bf\u03cd\u03c4\u03c9 \u03ba\u03b1\u03b8\u03b5\u03be\u03ae\u03c2. \u03a3\u03c4\u03b7\u03bd […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[7,47],"tags":[],"class_list":["post-1401","post","type-post","status-publish","format-standard","hentry","category-7","category--1-","entry"],"_links":{"self":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1401"}],"version-history":[{"count":18,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":1420,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1401\/revisions\/1420"}],"wp:attachment":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1401,"date":"2025-08-24T12:21:13","date_gmt":"2025-08-24T12:21:13","guid":{"rendered":"https:\/\/gkanamaria.sites.sch.gr\/?p=1401"},"modified":"2025-08-25T14:23:09","modified_gmt":"2025-08-25T14:23:09","slug":"%ce%b5%ce%bd%cf%8c%cf%84%ce%b7%cf%84%ce%b1-1-%ce%b1%ce%bb%ce%b3%ce%bf%cf%81%ce%b9%ce%b8%ce%bc%ce%b9%ce%ba%ce%ae-2","status":"publish","type":"post","link":"https:\/\/gkanamaria.sites.sch.gr\/?p=1401","title":{"rendered":"\u0395\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 1. \u0391\u03bb\u03b3\u03bf\u03c1\u03b9\u03b8\u03bc\u03b9\u03ba\u03ae"},"content":{"rendered":"\n\n\n\n \n \n \u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b7 \u03c4\u03b7\u03c2 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\u03c2<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n body {\n background-color: #f0f4f8;\n color: #1e293b;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n }\n .card {\n background-color: white;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n transition: box-shadow 0.3s ease-in-out;\n }\n .card:hover {\n box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n }\n .btn {\n display: inline-block;\n padding: 0.6rem 1.2rem;\n border-radius: 0.5rem;\n font-weight: 600;\n text-align: center;\n transition: background-color 0.2s, transform 0.1s;\n cursor: pointer;\n user-select: none;\n }\n .btn-primary {\n background-color: #0ea5e9;\n color: white;\n }\n .btn-primary:hover {\n background-color: #0284c7;\n }\n .btn-primary:active {\n transform: scale(0.98);\n }\n .btn-secondary {\n background-color: #94a3b8;\n color: white;\n }\n .btn-secondary:hover {\n background-color: #64748b;\n }\n .btn-disabled {\n background-color: #cbd5e1;\n color: #64748b;\n cursor: not-allowed;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .call-stack-item {\n padding: 0.5rem;\n margin-top: 0.5rem;\n border-radius: 0.5rem;\n background-color: #e2e8f0;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n transform: translateX(-20px);\n }\n .call-stack-item.active {\n opacity: 1;\n transform: translateX(0);\n }\n <\/style>\n<\/head>\n<body class=\"p-4 sm:p-6 md:p-8\">\n <div class=\"max-w-7xl mx-auto space-y-8\">\n\n <header class=\"text-center\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-sky-700\">\u0395\u03be\u03b5\u03c1\u03b5\u03c5\u03bd\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae<\/h1>\n <p class=\"mt-2 text-lg text-slate-600\">\u039c\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03c0\u03c1\u03bf\u03c3\u03ad\u03b3\u03b3\u03b9\u03c3\u03b7 \u03c3\u03b5 \u03b8\u03b5\u03bc\u03b5\u03bb\u03b9\u03ce\u03b4\u03b5\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2 \u03c4\u03b7\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2.<\/p>\n <\/header>\n\n <main class=\"space-y-12\">\n <div class=\"card p-6\">\n <h2 class=\"text-2xl font-semibold text-slate-800 mb-2\">\u03a4\u03b9 \u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae;<\/h2>\n <p class=\"text-slate-600\">\n \u0397 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b9\u03c3\u03c7\u03c5\u03c1\u03ae \u03c4\u03b5\u03c7\u03bd\u03b9\u03ba\u03ae \u03cc\u03c0\u03bf\u03c5 \u03bc\u03b9\u03b1 \u03c3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03ba\u03b1\u03bb\u03b5\u03af \u03c4\u03bf\u03bd \u03b5\u03b1\u03c5\u03c4\u03cc \u03c4\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bb\u03cd\u03c3\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1. \u03a6\u03b1\u03bd\u03c4\u03b1\u03c3\u03c4\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b6\u03b5\u03c4\u03b5 \u03ad\u03bd\u03b1\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7: \u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7, \u03c0\u03bf\u03c5 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1, \u03ba\u03b1\u03b9 \u03bf\u03cd\u03c4\u03c9 \u03ba\u03b1\u03b8\u03b5\u03be\u03ae\u03c2. \u03a3\u03c4\u03b7\u03bd \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae, \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03c5\u03bc\u03b5 \u03ad\u03bd\u03b1 \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1 \u03c3\u03b5 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b1, \u03c0\u03b1\u03bd\u03bf\u03bc\u03bf\u03b9\u03cc\u03c4\u03c5\u03c0\u03b1 \u03c5\u03c0\u03bf-\u03c0\u03c1\u03bf\u03b2\u03bb\u03ae\u03bc\u03b1\u03c4\u03b1 \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03b1\u03c0\u03bb\u03ae, \u03b2\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7 \u03c0\u03bf\u03c5 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03bb\u03cd\u03c3\u03bf\u03c5\u03bc\u03b5 \u03ac\u03bc\u03b5\u03c3\u03b1.\n <\/p>\n <p class=\"text-slate-600\"><br>\n \u0397 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03ad\u03bd\u03b1 \u03c3\u03b5\u03c4 \u03b1\u03c0\u03cc \u03c1\u03c9\u03c3\u03b9\u03ba\u03ad\u03c2 \u03ba\u03bf\u03cd\u03ba\u03bb\u03b5\u03c2. \u039a\u03ac\u03b8\u03b5 \u03ba\u03bf\u03cd\u03ba\u03bb\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b7, \u03c0\u03b1\u03bd\u03bf\u03bc\u03bf\u03b9\u03cc\u03c4\u03c5\u03c0\u03b7 \u03ba\u03bf\u03cd\u03ba\u03bb\u03b1, \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c4\u03b7\u03bd \u03c4\u03b5\u03bb\u03b5\u03c5\u03c4\u03b1\u03af\u03b1, \u03b7 \u03bf\u03c0\u03bf\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03bf\u03bb\u03cd \u03bc\u03b9\u03ba\u03c1\u03ae \u03ba\u03b1\u03b9 \u03b4\u03b5\u03bd \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03af\u03c0\u03bf\u03c4\u03b1 \u03ac\u03bb\u03bb\u03bf.\n\n \u0391\u03c5\u03c4\u03cc \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03ba\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03cc\u03c2 \u03b1\u03bb\u03b3\u03cc\u03c1\u03b9\u03b8\u03bc\u03bf\u03c2:\n\n \u03a0\u03b1\u03af\u03c1\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1.\n\n \u03a4\u03bf \u03c3\u03c0\u03ac\u03b5\u03b9 \u03c3\u03b5 \u03ad\u03bd\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03c0\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03af\u03b4\u03b9\u03bf \u03bc\u03b5 \u03c4\u03bf \u03b1\u03c1\u03c7\u03b9\u03ba\u03cc.\n\n \u03a4\u03bf \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9 \u03b1\u03c5\u03c4\u03cc \u03be\u03b1\u03bd\u03ac \u03ba\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac, \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bd\u03b1 \u03c6\u03c4\u03ac\u03c3\u03b5\u03b9 \u03c3\u03b5 \u03ad\u03bd\u03b1 \u03c4\u03cc\u03c3\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc \u03ba\u03b1\u03b9 \u03b1\u03c0\u03bb\u03cc \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03c0\u03bf\u03c5 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03c4\u03bf \u03bb\u03cd\u03c3\u03b5\u03b9 \u03b1\u03bc\u03ad\u03c3\u03c9\u03c2. \u0391\u03c5\u03c4\u03cc \u03c4\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b2\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7.\n\n \u039c\u03b5 \u03b1\u03c5\u03c4\u03cc\u03bd \u03c4\u03bf\u03bd \u03c4\u03c1\u03cc\u03c0\u03bf, \u03c4\u03bf \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1 \u03bb\u03cd\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b2\u03ae\u03bc\u03b1-\u03b2\u03ae\u03bc\u03b1, \u03be\u03b5\u03ba\u03b9\u03bd\u03ce\u03bd\u03c4\u03b1\u03c2 \u03b1\u03c0\u03cc \u03c4\u03bf \u03c0\u03b9\u03bf \u03b1\u03c0\u03bb\u03cc.\n <\/p>\n\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n <div class=\"card p-6 flex flex-col\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-4\">\u03a4\u03bf \u03a4\u03c1\u03af\u03b3\u03c9\u03bd\u03bf Sierpinski<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u03a4\u03bf \u03a4\u03c1\u03af\u03b3\u03c9\u03bd\u03bf Sierpinski \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 \u03b5\u03bd\u03cc\u03c2 \u03c3\u03c7\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2 \u03c0\u03bf\u03c5 \u00ab\u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf\u03bd \u03b5\u03b1\u03c5\u03c4\u03cc \u03c4\u03bf\u03c5\u00bb.\n\n \u039e\u03b5\u03ba\u03b9\u03bd\u03ac\u03bc\u03b5 \u03bc\u03b5 \u03ad\u03bd\u03b1 \u03b1\u03c0\u03bb\u03cc \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03bf. \u039c\u03b5\u03c4\u03ac, \u03c4\u03bf \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b5 \u03c4\u03ad\u03c3\u03c3\u03b5\u03c1\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03b1 \u03ba\u03b1\u03b9 \u03b1\u03c6\u03b1\u03b9\u03c1\u03bf\u03cd\u03bc\u03b5 \u03c4\u03bf \u03bc\u03b5\u03c3\u03b1\u03af\u03bf. \u03a4\u03ce\u03c1\u03b1, \u03ad\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c4\u03c1\u03af\u03b1 \u03bc\u03b9\u03ba\u03c1\u03ac \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03c4\u03bf \u03ba\u03b1\u03b8\u03ad\u03bd\u03b1 \u03bc\u03bf\u03b9\u03ac\u03b6\u03b5\u03b9 \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03bc\u03b5 \u03c4\u03bf \u03b1\u03c1\u03c7\u03b9\u03ba\u03cc \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf.\n\n \u0397 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1 \u03b1\u03c5\u03c4\u03ae \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac \u03ba\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac, \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03ad\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c4\u03c1\u03af\u03b3\u03c9\u03bd\u03b1. \u0391\u03c5\u03c4\u03cc \u03b1\u03ba\u03c1\u03b9\u03b2\u03ce\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae: \u03b7 \u03b5\u03c0\u03b1\u03bd\u03ac\u03bb\u03b7\u03c8\u03b7 \u03c4\u03b7\u03c2 \u03af\u03b4\u03b9\u03b1\u03c2 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1\u03c2 \u03c3\u03b5 \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03b7 \u03ba\u03bb\u03af\u03bc\u03b1\u03ba\u03b1, \u03be\u03b1\u03bd\u03ac \u03ba\u03b1\u03b9 \u03be\u03b1\u03bd\u03ac.\n\n \u0391\u03c5\u03be\u03ac\u03bd\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf \u00ab\u03b2\u03ac\u03b8\u03bf\u03c2\u00bb \u03c3\u03c4\u03b7\u03bd \u03b5\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ae, \u03b1\u03c0\u03bb\u03ac \u03b4\u03b5\u03af\u03c7\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b5\u03c2 \u03c6\u03bf\u03c1\u03ad\u03c2 \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c5\u03c4\u03ae \u03b7 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1. \u038c\u03c3\u03bf \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03c4\u03bf \u03b2\u03ac\u03b8\u03bf\u03c2, \u03c4\u03cc\u03c3\u03bf \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03bf \u00ab\u03b2\u03b1\u03b8\u03b9\u03ac\u00bb \u03b2\u03bb\u03ad\u03c0\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae.\n <\/p>\n <div class=\"flex-grow flex flex-col justify-center items-center\">\n <div class=\"w-full max-w-md bg-slate-100 rounded-lg p-2 my-4\">\n <canvas id=\"sierpinskiCanvas\"><\/canvas>\n <\/div>\n <div class=\"flex items-center justify-center gap-4\">\n <button id=\"sierpinski-decrement\" class=\"btn btn-secondary text-xl px-4 py-2\">–<\/button>\n <div class=\"text-center\">\n <span class=\"font-bold\">\u0392\u03ac\u03b8\u03bf\u03c2:<\/span>\n <span id=\"sierpinski-depth-label\" class=\"font-mono text-xl\">1<\/span>\n <\/div>\n <button id=\"sierpinski-increment\" class=\"btn btn-primary text-xl px-4 py-2\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card p-6 flex flex-col\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-4\">\u039f\u03b9 \u03a0\u03cd\u03c1\u03b3\u03bf\u03b9 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u0388\u03bd\u03b1 \u03ba\u03bb\u03b1\u03c3\u03b9\u03ba\u03cc \u03c0\u03b1\u03b6\u03bb \u03c0\u03bf\u03c5 \u03bb\u03cd\u03bd\u03b5\u03c4\u03b1\u03b9 \u03ba\u03bf\u03bc\u03c8\u03ac \u03bc\u03b5 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae. \u039f \u03c3\u03c4\u03cc\u03c7\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03c6\u03b5\u03c1\u03b8\u03bf\u03cd\u03bd \u03cc\u03bb\u03bf\u03b9 \u03bf\u03b9 \u03b4\u03af\u03c3\u03ba\u03bf\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03c3\u03c4\u03cd\u03bb\u03bf \u0391 \u03c3\u03c4\u03bf\u03bd \u0393, \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u0392 \u03c9\u03c2 \u03b2\u03bf\u03b7\u03b8\u03b7\u03c4\u03b9\u03ba\u03cc, \u03c7\u03c9\u03c1\u03af\u03c2 \u03c0\u03bf\u03c4\u03ad \u03ad\u03bd\u03b1\u03c2 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf\u03c2 \u03b4\u03af\u03c3\u03ba\u03bf\u03c2 \u03bd\u03b1 \u03bc\u03c0\u03b5\u03b9 \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf. \u0395\u03c0\u03b9\u03bb\u03ad\u03be\u03c4\u03b5 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03b4\u03af\u03c3\u03ba\u03c9\u03bd \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03ae\u03c3\u03c4\u03b5 \u03c4\u03b7\u03bd \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae \u03bb\u03cd\u03c3\u03b7.\n <\/p>\n <div class=\"flex-grow flex flex-col justify-center items-center\">\n <div class=\"w-full h-72 bg-slate-100 rounded-lg relative my-4\">\n <canvas id=\"hanoiCanvas\"><\/canvas>\n <\/div>\n <div class=\"flex flex-wrap items-center justify-center gap-4\">\n <div class=\"flex items-center gap-2\">\n <label for=\"num-disks\" class=\"font-bold\">\u0394\u03af\u03c3\u03ba\u03bf\u03b9:<\/label>\n <input type=\"range\" id=\"num-disks\" value=\"3\" min=\"1\" max=\"8\" class=\"w-24\">\n <span id=\"disk-count-label\" class=\"font-mono text-xl\">3<\/span>\n <\/div>\n <button id=\"start-hanoi\" class=\"btn btn-primary\">\u0388\u03bd\u03b1\u03c1\u03be\u03b7<\/button>\n <button id=\"reset-hanoi\" class=\"btn btn-secondary\">\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac<\/button>\n <\/div>\n <div id=\"hanoi-status\" class=\"mt-4 text-center h-10\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card p-6\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-2\">\u0397 \u0395\u03ba\u03c1\u03b7\u03ba\u03c4\u03b9\u03ba\u03ae \u0391\u03cd\u03be\u03b7\u03c3\u03b7 \u03c4\u03c9\u03bd \u039a\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u0397 \u03bf\u03bc\u03bf\u03c1\u03c6\u03b9\u03ac \u03c4\u03b7\u03c2 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae\u03c2 \u03bb\u03cd\u03c3\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03a0\u03cd\u03c1\u03b3\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9 \u03ba\u03c1\u03cd\u03b2\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03b5\u03ba\u03b8\u03b5\u03c4\u03b9\u03ba\u03ae \u03c0\u03bf\u03bb\u03c5\u03c0\u03bb\u03bf\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1. \u039f \u03b5\u03bb\u03ac\u03c7\u03b9\u03c3\u03c4\u03bf\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 $2^N – 1$, \u03cc\u03c0\u03bf\u03c5 \u039d \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c4\u03c9\u03bd \u03b4\u03af\u03c3\u03ba\u03c9\u03bd. \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03c4\u03b5 \u03c4\u03bf\u03bd \u03c0\u03b1\u03c1\u03b1\u03ba\u03ac\u03c4\u03c9 slider \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03af\u03c4\u03b5 \u03c0\u03ce\u03c2 \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c4\u03c9\u03bd \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd \u03b1\u03c5\u03be\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b4\u03c1\u03b1\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u03bc\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03b5\u03c0\u03b9\u03c0\u03bb\u03ad\u03bf\u03bd \u03b4\u03af\u03c3\u03ba\u03bf.\n <\/p>\n <div class=\"flex flex-col items-center gap-4 mt-4\">\n <div class=\"flex items-center gap-2\">\n <label for=\"moves-slider\" class=\"font-bold\">\u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u0394\u03af\u03c3\u03ba\u03c9\u03bd (N):<\/label>\n <input type=\"range\" id=\"moves-slider\" value=\"3\" min=\"1\" max=\"15\" class=\"w-48\">\n <span id=\"moves-count-label\" class=\"font-mono text-xl w-8 text-center\">3<\/span>\n <\/div>\n <p class=\"text-lg\">\u03a3\u03cd\u03bd\u03bf\u03bb\u03bf \u039a\u03b9\u03bd\u03ae\u03c3\u03b5\u03c9\u03bd: <span id=\"total-moves\" class=\"font-bold text-sky-600\">7<\/span><\/p>\n <\/div>\n <div class=\"chart-container mt-4\">\n <canvas id=\"hanoiMovesChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"card p-6\">\n <h2 class=\"text-2xl font-semibold text-center text-slate-800 mb-2\">\u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03c3\u03c4\u03bf \u03a0\u03b1\u03c1\u03b1\u03b3\u03bf\u03bd\u03c4\u03b9\u03ba\u03cc (N!)<\/h2>\n <p class=\"text-slate-600 mb-4\">\n \u039f \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc\u03c2 \u03c4\u03bf\u03c5 \u03c0\u03b1\u03c1\u03b1\u03b3\u03bf\u03bd\u03c4\u03b9\u03ba\u03bf\u03cd \u03b5\u03bd\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03ba\u03bb\u03b1\u03c3\u03b9\u03ba\u03cc \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 \u03c7\u03c1\u03ae\u03c3\u03b7\u03c2 \u03c4\u03b7\u03c2 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\u03c2. \u03a4\u03bf \u03c0\u03b1\u03c1\u03b1\u03b3\u03bf\u03bd\u03c4\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 N ($N!$) \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf \u03cc\u03bb\u03c9\u03bd \u03c4\u03c9\u03bd \u03b8\u03b5\u03c4\u03b9\u03ba\u03ce\u03bd \u03b1\u03ba\u03b5\u03c1\u03b1\u03af\u03c9\u03bd \u03bc\u03ad\u03c7\u03c1\u03b9 \u03c4\u03bf N. \u0393\u03b9\u03b1 \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1, $5! = 5 \\times 4 \\times 3 \\times 2 \\times 1 = 120$. \u039c\u03b9\u03b1 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03c4\u03bf \u03bb\u03cd\u03bd\u03b5\u03b9 \u03c9\u03c2 \u03b5\u03be\u03ae\u03c2: $N! = N \\times (N-1)!$. \u0397 \u03b2\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf $1! = 1$.\n <\/p>\n <div class=\"flex flex-col md:flex-row items-center justify-center gap-4 mt-4\">\n <div class=\"flex items-center gap-2\">\n <label for=\"factorial-input\" class=\"font-bold\">\u0395\u03b9\u03c3\u03ac\u03b3\u03b5\u03c4\u03b5 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc (N):<\/label>\n <input type=\"number\" id=\"factorial-input\" value=\"5\" min=\"0\" max=\"10\" class=\"w-20 px-2 py-1 border rounded-md text-center\">\n <\/div>\n <button id=\"calculate-factorial\" class=\"btn btn-primary\">\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc\u03c2<\/button>\n <\/div>\n <div class=\"mt-6 flex flex-col md:flex-row gap-8\">\n <div class=\"flex-1\">\n <h3 class=\"text-xl font-semibold text-slate-700 mb-2\">\u0391\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1:<\/h3>\n <div id=\"factorial-result\" class=\"text-3xl font-bold text-sky-600\">120<\/div>\n <\/div>\n <div class=\"flex-1\">\n <h3 class=\"text-xl font-semibold text-slate-700 mb-2\">\u0392\u03ae\u03bc\u03b1-\u03b2\u03ae\u03bc\u03b1 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03b9\u03ba\u03ae \u039a\u03bb\u03ae\u03c3\u03b7:<\/h3>\n <div id=\"factorial-call-stack\" class=\"flex flex-col-reverse items-start\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n\n \/\/ Sierpinski Triangle Logic\n const sierpinskiCanvas = document.getElementById('sierpinskiCanvas');\n const sCtx = sierpinskiCanvas.getContext('2d');\n let sierpinskiDepth = 1;\n\n const resizeSierpinski = () => {\n const container = sierpinskiCanvas.parentElement;\n const size = Math.min(container.clientWidth, 400);\n sierpinskiCanvas.width = size;\n sierpinskiCanvas.height = size * Math.sqrt(3) \/ 2;\n drawSierpinski();\n };\n\n const drawTriangle = (p1, p2, p3) => {\n sCtx.beginPath();\n sCtx.moveTo(p1.x, p1.y);\n sCtx.lineTo(p2.x, p2.y);\n sCtx.lineTo(p3.x, p3.y);\n sCtx.closePath();\n sCtx.fill();\n };\n\n const drawSierpinskiRecursive = (p1, p2, p3, depth) => {\n if (depth === 0) {\n drawTriangle(p1, p2, p3);\n return;\n }\n const p12 = { x: (p1.x + p2.x) \/ 2, y: (p1.y + p2.y) \/ 2 };\n const p23 = { x: (p2.x + p3.x) \/ 2, y: (p2.y + p3.y) \/ 2 };\n const p31 = { x: (p3.x + p1.x) \/ 2, y: (p3.y + p1.y) \/ 2 };\n\n drawSierpinskiRecursive(p1, p12, p31, depth - 1);\n drawSierpinskiRecursive(p12, p2, p23, depth - 1);\n drawSierpinskiRecursive(p31, p23, p3, depth - 1);\n };\n\n const drawSierpinski = () => {\n sCtx.clearRect(0, 0, sierpinskiCanvas.width, sierpinskiCanvas.height);\n sCtx.fillStyle = '#0ea5e9';\n const p1 = { x: sierpinskiCanvas.width \/ 2, y: 0 };\n const p2 = { x: 0, y: sierpinskiCanvas.height };\n const p3 = { x: sierpinskiCanvas.width, y: sierpinskiCanvas.height };\n drawSierpinskiRecursive(p1, p2, p3, sierpinskiDepth);\n };\n\n document.getElementById('sierpinski-increment').addEventListener('click', () => {\n if (sierpinskiDepth < 8) {\n sierpinskiDepth++;\n document.getElementById('sierpinski-depth-label').textContent = sierpinskiDepth;\n drawSierpinski();\n }\n });\n\n document.getElementById('sierpinski-decrement').addEventListener('click', () => {\n if (sierpinskiDepth > 0) {\n sierpinskiDepth--;\n document.getElementById('sierpinski-depth-label').textContent = sierpinskiDepth;\n drawSierpinski();\n }\n });\n\n \/\/ Towers of Hanoi Logic\n const hanoiCanvas = document.getElementById('hanoiCanvas');\n const hCtx = hanoiCanvas.getContext('2d');\n const numDisksSlider = document.getElementById('num-disks');\n const diskCountLabel = document.getElementById('disk-count-label');\n const startHanoiBtn = document.getElementById('start-hanoi');\n const resetHanoiBtn = document.getElementById('reset-hanoi');\n const hanoiStatus = document.getElementById('hanoi-status');\n\n let numDisks = 3;\n let towers = [];\n let isHanoiRunning = false;\n const diskColors = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#3b82f6', '#8b5cf6'];\n\n const resizeHanoi = () => {\n const container = hanoiCanvas.parentElement;\n hanoiCanvas.width = container.clientWidth;\n hanoiCanvas.height = container.clientHeight;\n if (!isHanoiRunning) setupHanoi();\n drawHanoi();\n };\n\n const setupHanoi = () => {\n isHanoiRunning = false;\n towers = [[], [], []];\n for (let i = numDisks; i > 0; i--) {\n towers[0].push(i);\n }\n hanoiStatus.textContent = \"\u03a0\u03b1\u03c4\u03ae\u03c3\u03c4\u03b5 '\u0388\u03bd\u03b1\u03c1\u03be\u03b7' \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03c4\u03b5.\";\n startHanoiBtn.classList.remove('btn-disabled');\n numDisksSlider.disabled = false;\n drawHanoi();\n };\n\n const drawHanoi = () => {\n hCtx.clearRect(0, 0, hanoiCanvas.width, hanoiCanvas.height);\n const towerWidth = 10;\n const towerHeight = hanoiCanvas.height * 0.8;\n const baseHeight = 15;\n const towerPositions = [hanoiCanvas.width * 0.2, hanoiCanvas.width * 0.5, hanoiCanvas.width * 0.8];\n const diskHeight = 15;\n const maxDiskWidth = hanoiCanvas.width * 0.25;\n\n hCtx.fillStyle = '#475569';\n hCtx.fillRect(0, hanoiCanvas.height - baseHeight, hanoiCanvas.width, baseHeight);\n\n towerPositions.forEach((posX, i) => {\n hCtx.fillRect(posX - towerWidth \/ 2, hanoiCanvas.height - baseHeight - towerHeight, towerWidth, towerHeight);\n hCtx.font = '16px sans-serif';\n hCtx.textAlign = 'center';\n hCtx.fillText(String.fromCharCode(65 + i), posX, hanoiCanvas.height - baseHeight - towerHeight - 5);\n\n towers[i].forEach((disk, j) => {\n const diskWidth = maxDiskWidth * (disk \/ numDisks);\n hCtx.fillStyle = diskColors[disk - 1 % diskColors.length];\n hCtx.fillRect(\n posX - diskWidth \/ 2,\n hanoiCanvas.height - baseHeight - (j + 1) * diskHeight,\n diskWidth,\n diskHeight\n );\n });\n });\n };\n\n numDisksSlider.addEventListener('input', (e) => {\n numDisks = parseInt(e.target.value);\n diskCountLabel.textContent = numDisks;\n setupHanoi();\n });\n\n resetHanoiBtn.addEventListener('click', setupHanoi);\n\n startHanoiBtn.addEventListener('click', async () => {\n if (isHanoiRunning) return;\n isHanoiRunning = true;\n startHanoiBtn.classList.add('btn-disabled');\n numDisksSlider.disabled = true;\n\n const moves = [];\n solveHanoiRecursive(numDisks, 0, 2, 1, moves);\n\n let moveCount = 0;\n for (const move of moves) {\n if (!isHanoiRunning) break;\n moveCount++;\n hanoiStatus.textContent = `\u039a\u03af\u03bd\u03b7\u03c3\u03b7 ${moveCount}: \u0391\u03c0\u03cc ${String.fromCharCode(65 + move.from)} \u03c0\u03c1\u03bf\u03c2 ${String.fromCharCode(65 + move.to)}`;\n const disk = towers[move.from].pop();\n towers[move.to].push(disk);\n drawHanoi();\n await new Promise(res => setTimeout(res, 400));\n }\n if (isHanoiRunning) {\n hanoiStatus.textContent = `\u039f\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03ce\u03b8\u03b7\u03ba\u03b5 \u03c3\u03b5 ${moves.length} \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2!`;\n } else {\n hanoiStatus.textContent = '\u0397 \u03b5\u03ba\u03c4\u03ad\u03bb\u03b5\u03c3\u03b7 \u03b4\u03b9\u03b1\u03ba\u03cc\u03c0\u03b7\u03ba\u03b5.';\n }\n isHanoiRunning = false;\n });\n\n resetHanoiBtn.addEventListener('click', () => {\n isHanoiRunning = false;\n setupHanoi();\n });\n\n const solveHanoiRecursive = (n, from, to, aux, moves) => {\n if (n === 1) {\n moves.push({ from, to });\n return;\n }\n solveHanoiRecursive(n - 1, from, aux, to, moves);\n moves.push({ from, to });\n solveHanoiRecursive(n - 1, aux, to, from, moves);\n };\n\n \/\/ Hanoi Moves Chart Logic\n const movesSlider = document.getElementById('moves-slider');\n const movesCountLabel = document.getElementById('moves-count-label');\n const totalMovesLabel = document.getElementById('total-moves');\n const hanoiChartCanvas = document.getElementById('hanoiMovesChart');\n let hanoiChart;\n\n const updateMovesChart = () => {\n const n = parseInt(movesSlider.value);\n movesCountLabel.textContent = n;\n const moves = BigInt(2) ** BigInt(n) - BigInt(1);\n totalMovesLabel.textContent = moves.toLocaleString('el-GR');\n\n const labels = [];\n const data = [];\n for (let i = 1; i <= n; i++) {\n labels.push(`N=${i}`);\n data.push(Number(BigInt(2) ** BigInt(i) - BigInt(1)));\n }\n\n if (hanoiChart) {\n hanoiChart.data.labels = labels;\n hanoiChart.data.datasets[0].data = data;\n hanoiChart.update();\n }\n };\n\n const createMovesChart = () => {\n const ctx = hanoiChartCanvas.getContext('2d');\n hanoiChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: [],\n datasets: [{\n label: '\u0395\u03bb\u03ac\u03c7\u03b9\u03c3\u03c4\u03b5\u03c2 \u039a\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2',\n data: [],\n backgroundColor: 'rgba(14, 165, 233, 0.6)',\n borderColor: 'rgba(14, 165, 233, 1)',\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n type: 'logarithmic',\n ticks: {\n callback: function(value, index, values) {\n if (value === 1000000) return \"1M\";\n if (value === 1000) return \"1K\";\n if (value === 1000000000) return \"1B\";\n return Number(value.toString()).toLocaleString('el-GR');\n }\n }\n }\n },\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += BigInt(context.parsed.y).toLocaleString('el-GR');\n }\n return label;\n }\n }\n }\n }\n }\n });\n updateMovesChart();\n };\n\n movesSlider.addEventListener('input', updateMovesChart);\n\n \/\/ Factorial Logic\n const factorialInput = document.getElementById('factorial-input');\n const calculateFactorialBtn = document.getElementById('calculate-factorial');\n const factorialResult = document.getElementById('factorial-result');\n const factorialCallStack = document.getElementById('factorial-call-stack');\n\n function factorialRecursive(n, stack) {\n stack.push(`\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc\u03c2 ${n}!`);\n if (n === 0) {\n stack.push('\u0392\u03b1\u03c3\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7: 0! = 1');\n return 1;\n }\n const result = n * factorialRecursive(n - 1, stack);\n \/\/ Fix: Corrected the template literal to avoid SyntaxError.\n stack.push(`\u0395\u03c0\u03b9\u03c3\u03c4\u03c1\u03bf\u03c6\u03ae: ${n} * ${n - 1}! = ${result}`);\n return result;\n }\n\n calculateFactorialBtn.addEventListener('click', () => {\n const n = parseInt(factorialInput.value);\n if (isNaN(n) || n < 0 || n > 10) {\n factorialResult.textContent = '\u039c\u03b7 \u03ad\u03b3\u03ba\u03c5\u03c1\u03b7 \u03b5\u03b9\u03c3\u03b1\u03b3\u03c9\u03b3\u03ae.';\n factorialCallStack.innerHTML = '';\n return;\n }\n\n factorialCallStack.innerHTML = '';\n const stack = [];\n const result = factorialRecursive(n, stack);\n\n factorialResult.textContent = result.toLocaleString('el-GR');\n\n stack.reverse().forEach((text, index) => {\n const div = document.createElement('div');\n div.className = 'call-stack-item';\n div.textContent = text;\n factorialCallStack.appendChild(div);\n setTimeout(() => {\n div.classList.add('active');\n }, index * 200);\n });\n });\n\n \/\/ Initializations\n new ResizeObserver(resizeSierpinski).observe(sierpinskiCanvas.parentElement);\n new ResizeObserver(resizeHanoi).observe(hanoiCanvas.parentElement);\n\n resizeSierpinski();\n setupHanoi();\n drawHanoi();\n createMovesChart();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color has-medium-font-size wp-elements-0b85c8927e96a4e21bc7741a6b22918c wp-block-paragraph\">\u03c4\u03ce\u03c1\u03b1 \u03c0\u03b1\u03af\u03be\u03b5 \u03bc\u03cc\u03bd\u03bf \u03c3\u03bf\u03c5!!!<\/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>\u039f\u03b9 \u03a0\u03cd\u03c1\u03b3\u03bf\u03b9 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n margin: 20px;\n background-color: #f0f0f0;\n }\n \n .game-container {\n max-width: 600px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n }\n \n .towers {\n display: flex;\n justify-content: space-around;\n margin: 30px 0;\n height: 200px;\n }\n \n .tower {\n width: 120px;\n height: 180px;\n border-bottom: 5px solid #333;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n }\n \n .tower::before {\n content: '';\n position: absolute;\n width: 10px;\n height: 180px;\n background-color: #333;\n bottom: 0;\n z-index: 1;\n }\n \n .disk {\n height: 20px;\n border-radius: 10px;\n margin: 2px 0;\n z-index: 2;\n position: relative;\n transition: all 0.3s ease;\n }\n \n .controls {\n margin: 20px 0;\n }\n \n button {\n padding: 10px 20px;\n margin: 5px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n \n button:hover {\n background-color: #45a049;\n }\n \n .disk-3 { width: 60px; background-color: #ff6b6b; }\n .disk-2 { width: 40px; background-color: #4ecdc4; }\n .disk-1 { width: 20px; background-color: #ffe66d; }\n \n .selected {\n box-shadow: 0 0 10px yellow;\n }\n \n #moves {\n font-weight: bold;\n margin: 10px 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <h1>\u039f\u03b9 \u03a0\u03cd\u03c1\u03b3\u03bf\u03b9 \u03c4\u03bf\u03c5 \u0391\u03bd\u03cc\u03b9<\/h1>\n \n <div class=\"towers\">\n <div class=\"tower\" id=\"tower1\">\n <div class=\"disk disk-3\" data-size=\"3\"><\/div>\n <div class=\"disk disk-2\" data-size=\"2\"><\/div>\n <div class=\"disk disk-1\" data-size=\"1\"><\/div>\n <\/div>\n <div class=\"tower\" id=\"tower2\"><\/div>\n <div class=\"tower\" id=\"tower3\"><\/div>\n <\/div>\n \n <div id=\"moves\">\u039coves: 0<\/div>\n \n <div class=\"controls\">\n <button onclick=\"selectTower(1)\">\u03a0\u03cd\u03c1\u03b3\u03bf\u03c2 1<\/button>\n <button onclick=\"selectTower(2)\">\u03a0\u03cd\u03c1\u03b3\u03bf\u03c2 2<\/button>\n <button onclick=\"selectTower(3)\">\u03a0\u03cd\u03c1\u03b3\u03bf\u03c2 3<\/button>\n <button onclick=\"resetGame()\">\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac<\/button>\n <\/div>\n \n <p>\u039a\u03b1\u03bd\u03cc\u03bd\u03b5\u03c2: \u039c\u03b5\u03c4\u03b1\u03ba\u03b9\u03bd\u03ae\u03c3\u03c4\u03b5 \u03cc\u03bb\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03af\u03c3\u03ba\u03bf\u03c5\u03c2 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03c0\u03c1\u03ce\u03c4\u03bf \u03c3\u03c4\u03bf\u03bd \u03c4\u03c1\u03af\u03c4\u03bf \u03c0\u03cd\u03c1\u03b3\u03bf.<br>\n \u0394\u03b5\u03bd \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b4\u03afsko \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf.<\/p>\n <\/div>\n\n <script>\n let selectedTower = null;\n let moves = 0;\n const totalDisks = 3;\n \n function selectTower(towerNumber) {\n const tower = document.getElementById('tower' + towerNumber);\n const disks = tower.querySelectorAll('.disk');\n \n if (selectedTower === null) {\n \/\/ \u0395\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03c0\u03c1\u03ce\u03c4\u03bf\u03c5 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c5\n if (disks.length > 0) {\n selectedTower = towerNumber;\n tower.classList.add('selected');\n }\n } else {\n \/\/ \u0395\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf\u03c5 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c5 \u03b3\u03b9\u03b1 \u03bc\u03b5\u03c4\u03b1\u03ba\u03af\u03bd\u03b7\u03c3\u03b7\n if (selectedTower === towerNumber) {\n \/\/ \u0391\u03c0\u03bf\u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03b1\u03bd \u03c0\u03b1\u03c4\u03b7\u03b8\u03b5\u03af \u03bf \u03af\u03b4\u03b9\u03bf\u03c2 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c2\n document.getElementById('tower' + selectedTower).classList.remove('selected');\n selectedTower = null;\n } else {\n moveDisk(selectedTower, towerNumber);\n document.getElementById('tower' + selectedTower).classList.remove('selected');\n selectedTower = null;\n }\n }\n }\n \n function moveDisk(fromTower, toTower) {\n const from = document.getElementById('tower' + fromTower);\n const to = document.getElementById('tower' + toTower);\n \n const fromDisks = from.querySelectorAll('.disk');\n const toDisks = to.querySelectorAll('.disk');\n \n if (fromDisks.length === 0) return;\n \n const diskToMove = fromDisks[fromDisks.length - 1];\n const diskSize = parseInt(diskToMove.getAttribute('data-size'));\n \n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03ba\u03b1\u03bd\u03cc\u03bd\u03c9\u03bd\n if (toDisks.length > 0) {\n const topDiskSize = parseInt(toDisks[toDisks.length - 1].getAttribute('data-size'));\n if (diskSize > topDiskSize) {\n alert(\"\u0394\u03b5\u03bd \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03bc\u03b5\u03b3\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \u03b4\u03af\u03c3\u03ba\u03bf \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf!\");\n return;\n }\n }\n \n \/\/ \u039c\u03b5\u03c4\u03b1\u03ba\u03af\u03bd\u03b7\u03c3\u03b7 \u03b4\u03af\u03c3\u03ba\u03bf\u03c5\n from.removeChild(diskToMove);\n to.appendChild(diskToMove);\n \n moves++;\n document.getElementById('moves').textContent = 'Moves: ' + moves;\n \n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03af\u03ba\u03b7\n checkWin();\n }\n \n function checkWin() {\n const tower3 = document.getElementById('tower3');\n if (tower3.querySelectorAll('.disk').length === totalDisks) {\n setTimeout(() => {\n alert(`\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u03a4\u03b5\u03bb\u03b5\u03b9\u03ce\u03c3\u03b1\u03c4\u03b5 \u03c4\u03bf \u03c0\u03b1\u03b6\u03bb \u03c3\u03b5 ${moves} \u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2!`);\n }, 100);\n }\n }\n \n function resetGame() {\n const tower1 = document.getElementById('tower1');\n const tower2 = document.getElementById('tower2');\n const tower3 = document.getElementById('tower3');\n \n \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03cc\u03bb\u03c9\u03bd \u03c4\u03c9\u03bd \u03b4\u03af\u03c3\u03ba\u03c9\u03bd\n tower2.innerHTML = '';\n tower3.innerHTML = '';\n \n \/\/ \u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03b4\u03af\u03c3\u03ba\u03c9\u03bd \u03c3\u03c4\u03bf\u03bd \u03c0\u03c1\u03ce\u03c4\u03bf \u03c0\u03cd\u03c1\u03b3\u03bf\n tower1.innerHTML = `\n <div class=\"disk disk-3\" data-size=\"3\"><\/div>\n <div class=\"disk disk-2\" data-size=\"2\"><\/div>\n <div class=\"disk disk-1\" data-size=\"1\"><\/div>\n `;\n \n moves = 0;\n selectedTower = null;\n document.getElementById('moves').textContent = 'Moves: 0';\n \n \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae\u03c2 \u03b1\u03c0\u03cc \u03cc\u03bb\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03c0\u03cd\u03c1\u03b3\u03bf\u03c5\u03c2\n document.querySelectorAll('.tower').forEach(tower => {\n tower.classList.remove('selected');\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b7 \u03c4\u03b7\u03c2 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\u03c2 \u0395\u03be\u03b5\u03c1\u03b5\u03c5\u03bd\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u039c\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03c0\u03c1\u03bf\u03c3\u03ad\u03b3\u03b3\u03b9\u03c3\u03b7 \u03c3\u03b5 \u03b8\u03b5\u03bc\u03b5\u03bb\u03b9\u03ce\u03b4\u03b5\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2 \u03c4\u03b7\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2. \u03a4\u03b9 \u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u0391\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae; \u0397 \u03b1\u03bd\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b9\u03c3\u03c7\u03c5\u03c1\u03ae \u03c4\u03b5\u03c7\u03bd\u03b9\u03ba\u03ae \u03cc\u03c0\u03bf\u03c5 \u03bc\u03b9\u03b1 \u03c3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03ba\u03b1\u03bb\u03b5\u03af \u03c4\u03bf\u03bd \u03b5\u03b1\u03c5\u03c4\u03cc \u03c4\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bb\u03cd\u03c3\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03c0\u03c1\u03cc\u03b2\u03bb\u03b7\u03bc\u03b1. \u03a6\u03b1\u03bd\u03c4\u03b1\u03c3\u03c4\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b6\u03b5\u03c4\u03b5 \u03ad\u03bd\u03b1\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7: \u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf\u03bd \u03ba\u03b1\u03b8\u03c1\u03ad\u03c6\u03c4\u03b7, \u03c0\u03bf\u03c5 \u03c0\u03b5\u03c1\u03b9\u03ad\u03c7\u03b5\u03b9 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1, \u03ba\u03b1\u03b9 \u03bf\u03cd\u03c4\u03c9 \u03ba\u03b1\u03b8\u03b5\u03be\u03ae\u03c2. \u03a3\u03c4\u03b7\u03bd […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[7,47],"tags":[],"class_list":["post-1401","post","type-post","status-publish","format-standard","hentry","category-7","category--1-","entry"],"_links":{"self":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1401"}],"version-history":[{"count":18,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":1420,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1401\/revisions\/1420"}],"wp:attachment":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}