\u03a0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03b1 – \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03cc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\n <style>\n :root { color-scheme: light; }\n body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }\n \/* \u0394\u03b9\u03b1\u03ba\u03c1\u03b9\u03c4\u03b9\u03ba\u03cc \u03ba\u03c5\u03bc\u03b1\u03c4\u03b9\u03c3\u03c4\u03cc \u03c6\u03cc\u03bd\u03c4\u03bf *\/\n .bg-wave {\n background: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.25), rgba(56,189,248,0)),\n radial-gradient(900px 500px at 90% 0%, rgba(16,185,129,.22), rgba(16,185,129,0)),\n linear-gradient(180deg, #0ea5e9 0%, #0ea5e9 30%, #0ea5e9 30%, #0891b2 100%);\n }\n \/* \u0391\u03c0\u03b1\u03bb\u03ae \u03ac\u03bd\u03bf\u03b4\u03bf\u03c2 \u03c3\u03c4\u03b1 \u03c0\u03bb\u03b1\u03ba\u03af\u03b4\u03b9\u03b1 *\/\n .tile:hover .tile-arrow { transform: translateX(4px); }\n .tile:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(34,197,94,.35); }\n .tilt {\n transform: perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));\n transition: transform 200ms ease;\n will-change: transform;\n }\n \/* \u039a\u03cd\u03bc\u03b1 hover *\/\n .ink {\n position: absolute; border-radius: 999px; pointer-events: none; transform: scale(0);\n animation: ripple .6s ease-out forwards; opacity: .25;\n }\n @keyframes ripple {\n to { transform: scale(12); opacity: 0; }\n }\n \/* Modal styles *\/\n .modal-backdrop { background: rgba(2,6,23,.55); backdrop-filter: blur(4px); }\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-wave text-slate-900\">\n \n <header class=\"relative\">\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 pt-8 pb-6\">\n <div class=\"flex items-center justify-between\">\n <a href=\"https:\/\/harlemcore.sites.sch.gr\/personal\/\" class=\"group inline-flex items-center gap-2 text-white\/90 hover:text-white transition\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 opacity-90 group-hover:opacity-100\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <path d=\"M3 12l9-9 9 9\" \/>\n <path d=\"M9 21V9h6v12\" \/>\n <\/svg>\n <span class=\"font-semibold\">\u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03b7\u03bd \u03b1\u03c1\u03c7\u03b9\u03ba\u03ae<\/span>\n <\/a>\n\n <button id=\"settingsBtn\" class=\"inline-flex items-center gap-2 rounded-full bg-white\/15 hover:bg-white\/25 text-white px-4 py-2.5 backdrop-blur-md shadow-sm transition focus:outline-none focus-visible:ring-4 focus-visible:ring-white\/40\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5 opacity-95\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <path d=\"M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z\" \/>\n <path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.07a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.07a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06A2 2 0 016.02 2.4l.06.06a1.65 1.65 0 001.82.33H8a1.65 1.65 0 001-1.51V1a2 2 0 014 0v.07a1.65 1.65 0 001 1.51h.1a1.65 1.65 0 001.82-.33l.06-.06A2 2 0 0121 6.02l-.06.06a1.65 1.65 0 00-.33 1.82V8a1.65 1.65 0 001.51 1H22a2 2 0 010 4h-.07a1.65 1.65 0 00-1.51 1z\"\/>\n <\/svg>\n <span class=\"font-semibold\">\u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd<\/span>\n <\/button>\n <\/div>\n\n <div class=\"mt-8 text-white\">\n\n \n <p class=\"text-white\/90 max-w-2xl mt-3\">\u03a0\u03b1\u03c4\u03ae\u03c3\u03c4\u03b5 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c4\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03b2\u03b5\u03af\u03c4\u03b5 \u03c3\u03c4\u03b9\u03c2 \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03b5\u03bb\u03af\u03b4\u03b5\u03c2 \u03c4\u03bf\u03c5 \u03b9\u03c3\u03c4\u03bf\u03c4\u03cc\u03c0\u03bf\u03c5 \u03c3\u03b1\u03c2.<\/p>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"relative\">\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 pb-16\">\n <section id=\"tilesGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6\">\n \n <\/section>\n <\/div>\n <\/main>\n\n \n <div id=\"settingsModal\" class=\"fixed inset-0 hidden items-center justify-center p-4 z-50\">\n <div class=\"absolute inset-0 modal-backdrop\"><\/div>\n <div class=\"relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden\">\n <div class=\"flex items-center justify-between px-6 py-4 bg-gradient-to-r from-sky-500 to-teal-500 text-white\">\n <h2 class=\"text-lg font-bold\">\u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd \u03c4\u03ac\u03be\u03b5\u03c9\u03bd<\/h2>\n <button id=\"closeModal\" class=\"p-2 rounded-full hover:bg-white\/15 focus:outline-none focus-visible:ring-4 focus-visible:ring-white\/40\" aria-label=\"\u039a\u03bb\u03b5\u03af\u03c3\u03b9\u03bc\u03bf\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M6 6l12 12M6 18L18 6\"\/>\n <\/svg>\n <\/button>\n <\/div>\n <div class=\"p-6 space-y-5\">\n <p class=\"text-slate-600\">\u039f\u03c1\u03af\u03c3\u03c4\u03b5 \u03c4\u03b9\u03c2 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b1\u03ba\u03af\u03b4\u03b9\u03bf. \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03c0\u03bb\u03ae\u03c1\u03b7 \u03ae \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03b4\u03b9\u03b5\u03cd\u03b8\u03c5\u03bd\u03c3\u03b7. \u039f\u03b9 \u03c1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c3\u03c4\u03b7 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae \u03c3\u03b1\u03c2.<\/p>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div class=\"space-y-2\">\n <label for=\"link-a\" class=\"block text-sm font-semibold text-slate-700\">\u0391’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-a\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/a\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-sky-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-b\" class=\"block text-sm font-semibold text-slate-700\">\u0392’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-b\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/b\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-sky-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-c\" class=\"block text-sm font-semibold text-slate-700\">\u0393’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-c\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/g\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-teal-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-d\" class=\"block text-sm font-semibold text-slate-700\">\u0394’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-d\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/d\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-teal-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-e\" class=\"block text-sm font-semibold text-slate-700\">\u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-e\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/e\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-emerald-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-f\" class=\"block text-sm font-semibold text-slate-700\">\u03a3\u03c4’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-f\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/st\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-emerald-200\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"px-6 py-4 bg-slate-50 flex items-center justify-between\">\n <button id=\"resetLinks\" class=\"text-slate-600 hover:text-slate-900 underline underline-offset-4\">\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03c0\u03c1\u03bf\u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ce\u03bd<\/button>\n <div class=\"flex items-center gap-3\">\n <button id=\"cancelLinks\" class=\"px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:bg-slate-100\">\u0386\u03ba\u03c5\u03c1\u03bf<\/button>\n <button id=\"saveLinks\" class=\"px-4 py-2 rounded-xl bg-sky-600 text-white font-semibold hover:bg-sky-700 shadow-sm\">\u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0394\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03b1 \u03c0\u03bb\u03b1\u03ba\u03b9\u03b4\u03af\u03c9\u03bd\n const tiles = [\n { id: 'a', title: \"\u0391' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-sky-400 to-sky-600', icon: 'book' },\n { id: 'b', title: \"\u0392' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-teal-400 to-teal-600', icon: 'pencil' },\n { id: 'c', title: \"\u0393' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-emerald-400 to-emerald-600', icon: 'light' },\n { id: 'd', title: \"\u0394' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-indigo-400 to-indigo-600', icon: 'compass' },\n { id: 'e', title: \"\u0395' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-fuchsia-400 to-fuchsia-600', icon: 'atom' },\n { id: 'f', title: \"\u03a3\u03c4' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-amber-400 to-amber-600', icon: 'trophy' },\n ];\n\n \/\/ \u03a0\u03c1\u03bf\u03b5\u03c0\u03b9\u03bb\u03b5\u03b3\u03bc\u03ad\u03bd\u03bf\u03b9 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03b9 (\u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03bb\u03bb\u03ac\u03be\u03b5\u03c4\u03b5 \u03b1\u03c0\u03cc \u03c4\u03bf modal)\n const defaultLinks = {\n a: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n b: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n c: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n d: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n e: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n f: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\"\n };\n\n const STORAGE_KEY = 'classLinks.v1';\n\n function getSavedLinks() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return { ...defaultLinks };\n const parsed = JSON.parse(raw);\n return { ...defaultLinks, ...parsed };\n } catch {\n return { ...defaultLinks };\n }\n }\n\n function saveLinks(links) {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(links));\n }\n\n function iconSVG(name) {\n const base = 'currentColor';\n switch (name) {\n case 'book':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M4 19.5A2.5 2.5 0 016.5 17H20\" \/>\n <path d=\"M20 22H6.5A2.5 2.5 0 014 19.5V6.5A2.5 2.5 0 016.5 4H20v18z\" \/>\n <\/svg>`;\n case 'pencil':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M12 20h9\" \/>\n <path d=\"M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4 12.5-12.5z\"\/>\n <\/svg>`;\n case 'light':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"5\"\/>\n <\/svg>`;\n case 'compass':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M16 8l-2.5 6.5L7 16l2.5-6.5L16 8z\"\/>\n <\/svg>`;\n case 'atom':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <circle cx=\"12\" cy=\"12\" r=\"1.8\" \/>\n <path d=\"M7 7c3-3 7-3 10 0s3 7 0 10-7 3-10 0-3-7 0-10z\"\/>\n <path d=\"M4 12h16M12 4v16\"\/>\n <\/svg>`;\n case 'trophy':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M8 21h8M12 17v4\"\/>\n <path d=\"M7 4h10v4a5 5 0 11-10 0V4z\"\/>\n <path d=\"M5 6H3a3 3 0 003 3M19 6h2a3 3 0 01-3 3\"\/>\n <\/svg>`;\n default:\n return '';\n }\n }\n\n function makeTile({ id, title, color, icon }, url) {\n const link = url || defaultLinks[id];\n \/\/ Card\n const a = document.createElement('a');\n a.href = link;\n a.dataset.id = id;\n a.className = `relative tile tilt group overflow-hidden rounded-2xl bg-white\/95 shadow-[0_10px_30px_rgba(2,6,23,0.08)] ring-1 ring-black\/5 hover:shadow-[0_14px_40px_rgba(2,6,23,0.12)] transition`;\n\n \/\/ Gradient band\n const band = document.createElement('div');\n band.className = `absolute inset-x-0 top-0 h-1.5 bg-gradient-to-r ${color}`;\n a.appendChild(band);\n\n \/\/ Content\n const wrap = document.createElement('div');\n wrap.className = 'relative p-6 md:p-7 flex items-center gap-5';\n wrap.innerHTML = `\n <div class=\"shrink-0 rounded-xl p-3 text-white bg-gradient-to-br ${color} shadow-inner\">\n ${iconSVG(icon)}\n <\/div>\n <div class=\"min-w-0\">\n <h3 class=\"text-lg md:text-xl font-extrabold text-slate-900\">${title}<\/h3>\n <p class=\"text-slate-600 text-sm mt-1\">\u039c\u03b5\u03c4\u03ac\u03b2\u03b1\u03c3\u03b7 \u03c3\u03c4\u03b7 \u03c3\u03b5\u03bb\u03af\u03b4\u03b1 \u03c4\u03b7\u03c2 \u03c4\u03ac\u03be\u03b7\u03c2<\/p>\n <\/div>\n <div class=\"ml-auto text-slate-400 group-hover:text-slate-700 transition\">\n <svg class=\"tile-arrow w-6 h-6\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M5 12h14M13 5l7 7-7 7\"\/>\n <\/svg>\n <\/div>\n `;\n a.appendChild(wrap);\n\n \/\/ Ink effect on click\n a.addEventListener('click', (e) => {\n const ink = document.createElement('span');\n const rect = a.getBoundingClientRect();\n ink.className = 'ink';\n ink.style.left = (e.clientX - rect.left) + 'px';\n ink.style.top = (e.clientY - rect.top) + 'px';\n ink.style.width = ink.style.height = '20px';\n ink.style.background = 'currentColor';\n ink.style.color = '#0ea5e9';\n a.appendChild(ink);\n setTimeout(() => ink.remove(), 650);\n });\n\n \/\/ Subtle tilt on move\n a.addEventListener('mousemove', (e) => {\n const r = a.getBoundingClientRect();\n const x = e.clientX - r.left, y = e.clientY - r.top;\n const ry = ((x \/ r.width) - 0.5) * 6; \/\/ yaw\n const rx = -((y \/ r.height) - 0.5) * 6; \/\/ pitch\n a.style.setProperty('--rx', rx + 'deg');\n a.style.setProperty('--ry', ry + 'deg');\n });\n a.addEventListener('mouseleave', () => {\n a.style.setProperty('--rx', '0deg');\n a.style.setProperty('--ry', '0deg');\n });\n\n return a;\n }\n\n \/\/ Render tiles\n const grid = document.getElementById('tilesGrid');\n let links = getSavedLinks();\n function renderTiles() {\n \/\/ Selective updates: update or create per id\n const present = new Set();\n tiles.forEach(t => {\n present.add(t.id);\n const existing = grid.querySelector(`a[data-id=\"${t.id}\"]`);\n const url = links[t.id] || defaultLinks[t.id];\n if (existing) {\n if (existing.getAttribute('href') !== url) existing.setAttribute('href', url);\n } else {\n grid.appendChild(makeTile(t, url));\n }\n });\n \/\/ Remove any extra nodes not in tiles\n grid.querySelectorAll('a[data-id]').forEach(a => {\n if (!present.has(a.dataset.id)) a.remove();\n });\n }\n renderTiles();\n\n \/\/ Settings modal logic\n const modal = document.getElementById('settingsModal');\n const settingsBtn = document.getElementById('settingsBtn');\n const closeModal = document.getElementById('closeModal');\n const cancelLinks = document.getElementById('cancelLinks');\n const saveLinksBtn = document.getElementById('saveLinks');\n const resetLinksBtn = document.getElementById('resetLinks');\n\n const fields = {\n a: document.getElementById('link-a'),\n b: document.getElementById('link-b'),\n c: document.getElementById('link-c'),\n d: document.getElementById('link-d'),\n e: document.getElementById('link-e'),\n f: document.getElementById('link-f'),\n };\n\n function openModal() {\n \/\/ fill current values\n links = getSavedLinks();\n Object.keys(fields).forEach(k => fields[k].value = links[k] || '');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n \/\/ trap focus\n setTimeout(() => fields.a.focus(), 50);\n }\n function hideModal() {\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n settingsBtn.addEventListener('click', openModal);\n closeModal.addEventListener('click', hideModal);\n cancelLinks.addEventListener('click', hideModal);\n modal.addEventListener('click', (e) => { if (e.target === modal) hideModal(); });\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) hideModal(); });\n\n saveLinksBtn.addEventListener('click', () => {\n const updated = {};\n Object.keys(fields).forEach(k => {\n const val = fields[k].value.trim();\n updated[k] = val || defaultLinks[k];\n });\n saveLinks(updated);\n links = updated;\n renderTiles();\n hideModal();\n });\n\n resetLinksBtn.addEventListener('click', () => {\n if (confirm('\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03cc\u03bb\u03c9\u03bd \u03c3\u03c4\u03b9\u03c2 \u03c0\u03c1\u03bf\u03b5\u03c0\u03b9\u03bb\u03b5\u03b3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2;')) {\n saveLinks(defaultLinks);\n links = { ...defaultLinks };\n Object.keys(fields).forEach(k => fields[k].value = links[k]);\n }\n });\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'97ef42bbf48e78bf',t:'MTc1Nzg0NjM2OC4wMDAwMDA='};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<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u03a0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03b1 \u03a0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03b1 – \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03cc \u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03b7\u03bd \u03b1\u03c1\u03c7\u03b9\u03ba\u03ae \u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd \u03a0\u03b1\u03c4\u03ae\u03c3\u03c4\u03b5 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c4\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03b2\u03b5\u03af\u03c4\u03b5 \u03c3\u03c4\u03b9\u03c2 \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03b5\u03bb\u03af\u03b4\u03b5\u03c2 \u03c4\u03bf\u03c5 \u03b9\u03c3\u03c4\u03bf\u03c4\u03cc\u03c0\u03bf\u03c5 \u03c3\u03b1\u03c2. \u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd \u03c4\u03ac\u03be\u03b5\u03c9\u03bd \u039f\u03c1\u03af\u03c3\u03c4\u03b5 \u03c4\u03b9\u03c2 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b1\u03ba\u03af\u03b4\u03b9\u03bf. \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03c0\u03bb\u03ae\u03c1\u03b7 \u03ae \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03b4\u03b9\u03b5\u03cd\u03b8\u03c5\u03bd\u03c3\u03b7. \u039f\u03b9 \u03c1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c3\u03c4\u03b7 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae \u03c3\u03b1\u03c2. \u0391’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0392’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0393’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0394’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u03a3\u03c4’…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2601","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts\/2601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2601"}],"version-history":[{"count":7,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts\/2601\/revisions"}],"predecessor-version":[{"id":2623,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts\/2601\/revisions\/2623"}],"wp:attachment":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n \u03a0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03b1 – \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03cc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\n <style>\n :root { color-scheme: light; }\n body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }\n \/* \u0394\u03b9\u03b1\u03ba\u03c1\u03b9\u03c4\u03b9\u03ba\u03cc \u03ba\u03c5\u03bc\u03b1\u03c4\u03b9\u03c3\u03c4\u03cc \u03c6\u03cc\u03bd\u03c4\u03bf *\/\n .bg-wave {\n background: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.25), rgba(56,189,248,0)),\n radial-gradient(900px 500px at 90% 0%, rgba(16,185,129,.22), rgba(16,185,129,0)),\n linear-gradient(180deg, #0ea5e9 0%, #0ea5e9 30%, #0ea5e9 30%, #0891b2 100%);\n }\n \/* \u0391\u03c0\u03b1\u03bb\u03ae \u03ac\u03bd\u03bf\u03b4\u03bf\u03c2 \u03c3\u03c4\u03b1 \u03c0\u03bb\u03b1\u03ba\u03af\u03b4\u03b9\u03b1 *\/\n .tile:hover .tile-arrow { transform: translateX(4px); }\n .tile:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(34,197,94,.35); }\n .tilt {\n transform: perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));\n transition: transform 200ms ease;\n will-change: transform;\n }\n \/* \u039a\u03cd\u03bc\u03b1 hover *\/\n .ink {\n position: absolute; border-radius: 999px; pointer-events: none; transform: scale(0);\n animation: ripple .6s ease-out forwards; opacity: .25;\n }\n @keyframes ripple {\n to { transform: scale(12); opacity: 0; }\n }\n \/* Modal styles *\/\n .modal-backdrop { background: rgba(2,6,23,.55); backdrop-filter: blur(4px); }\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-wave text-slate-900\">\n \n <header class=\"relative\">\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 pt-8 pb-6\">\n <div class=\"flex items-center justify-between\">\n <a href=\"https:\/\/harlemcore.sites.sch.gr\/personal\/\" class=\"group inline-flex items-center gap-2 text-white\/90 hover:text-white transition\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 opacity-90 group-hover:opacity-100\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <path d=\"M3 12l9-9 9 9\" \/>\n <path d=\"M9 21V9h6v12\" \/>\n <\/svg>\n <span class=\"font-semibold\">\u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03b7\u03bd \u03b1\u03c1\u03c7\u03b9\u03ba\u03ae<\/span>\n <\/a>\n\n <button id=\"settingsBtn\" class=\"inline-flex items-center gap-2 rounded-full bg-white\/15 hover:bg-white\/25 text-white px-4 py-2.5 backdrop-blur-md shadow-sm transition focus:outline-none focus-visible:ring-4 focus-visible:ring-white\/40\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5 opacity-95\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <path d=\"M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z\" \/>\n <path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.07a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.07a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06A2 2 0 016.02 2.4l.06.06a1.65 1.65 0 001.82.33H8a1.65 1.65 0 001-1.51V1a2 2 0 014 0v.07a1.65 1.65 0 001 1.51h.1a1.65 1.65 0 001.82-.33l.06-.06A2 2 0 0121 6.02l-.06.06a1.65 1.65 0 00-.33 1.82V8a1.65 1.65 0 001.51 1H22a2 2 0 010 4h-.07a1.65 1.65 0 00-1.51 1z\"\/>\n <\/svg>\n <span class=\"font-semibold\">\u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd<\/span>\n <\/button>\n <\/div>\n\n <div class=\"mt-8 text-white\">\n\n \n <p class=\"text-white\/90 max-w-2xl mt-3\">\u03a0\u03b1\u03c4\u03ae\u03c3\u03c4\u03b5 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c4\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03b2\u03b5\u03af\u03c4\u03b5 \u03c3\u03c4\u03b9\u03c2 \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03b5\u03bb\u03af\u03b4\u03b5\u03c2 \u03c4\u03bf\u03c5 \u03b9\u03c3\u03c4\u03bf\u03c4\u03cc\u03c0\u03bf\u03c5 \u03c3\u03b1\u03c2.<\/p>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"relative\">\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 pb-16\">\n <section id=\"tilesGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6\">\n \n <\/section>\n <\/div>\n <\/main>\n\n \n <div id=\"settingsModal\" class=\"fixed inset-0 hidden items-center justify-center p-4 z-50\">\n <div class=\"absolute inset-0 modal-backdrop\"><\/div>\n <div class=\"relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden\">\n <div class=\"flex items-center justify-between px-6 py-4 bg-gradient-to-r from-sky-500 to-teal-500 text-white\">\n <h2 class=\"text-lg font-bold\">\u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd \u03c4\u03ac\u03be\u03b5\u03c9\u03bd<\/h2>\n <button id=\"closeModal\" class=\"p-2 rounded-full hover:bg-white\/15 focus:outline-none focus-visible:ring-4 focus-visible:ring-white\/40\" aria-label=\"\u039a\u03bb\u03b5\u03af\u03c3\u03b9\u03bc\u03bf\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M6 6l12 12M6 18L18 6\"\/>\n <\/svg>\n <\/button>\n <\/div>\n <div class=\"p-6 space-y-5\">\n <p class=\"text-slate-600\">\u039f\u03c1\u03af\u03c3\u03c4\u03b5 \u03c4\u03b9\u03c2 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b1\u03ba\u03af\u03b4\u03b9\u03bf. \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03c0\u03bb\u03ae\u03c1\u03b7 \u03ae \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03b4\u03b9\u03b5\u03cd\u03b8\u03c5\u03bd\u03c3\u03b7. \u039f\u03b9 \u03c1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c3\u03c4\u03b7 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae \u03c3\u03b1\u03c2.<\/p>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div class=\"space-y-2\">\n <label for=\"link-a\" class=\"block text-sm font-semibold text-slate-700\">\u0391’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-a\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/a\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-sky-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-b\" class=\"block text-sm font-semibold text-slate-700\">\u0392’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-b\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/b\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-sky-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-c\" class=\"block text-sm font-semibold text-slate-700\">\u0393’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-c\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/g\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-teal-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-d\" class=\"block text-sm font-semibold text-slate-700\">\u0394’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-d\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/d\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-teal-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-e\" class=\"block text-sm font-semibold text-slate-700\">\u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-e\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/e\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-emerald-200\" \/>\n <\/div>\n <div class=\"space-y-2\">\n <label for=\"link-f\" class=\"block text-sm font-semibold text-slate-700\">\u03a3\u03c4’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/label>\n <input id=\"link-f\" type=\"url\" placeholder=\"\u03c0.\u03c7. https:\/\/harlemcore.sites.sch.gr\/personal\/st\" class=\"w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-emerald-200\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"px-6 py-4 bg-slate-50 flex items-center justify-between\">\n <button id=\"resetLinks\" class=\"text-slate-600 hover:text-slate-900 underline underline-offset-4\">\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03c0\u03c1\u03bf\u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ce\u03bd<\/button>\n <div class=\"flex items-center gap-3\">\n <button id=\"cancelLinks\" class=\"px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:bg-slate-100\">\u0386\u03ba\u03c5\u03c1\u03bf<\/button>\n <button id=\"saveLinks\" class=\"px-4 py-2 rounded-xl bg-sky-600 text-white font-semibold hover:bg-sky-700 shadow-sm\">\u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0394\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03b1 \u03c0\u03bb\u03b1\u03ba\u03b9\u03b4\u03af\u03c9\u03bd\n const tiles = [\n { id: 'a', title: \"\u0391' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-sky-400 to-sky-600', icon: 'book' },\n { id: 'b', title: \"\u0392' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-teal-400 to-teal-600', icon: 'pencil' },\n { id: 'c', title: \"\u0393' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-emerald-400 to-emerald-600', icon: 'light' },\n { id: 'd', title: \"\u0394' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-indigo-400 to-indigo-600', icon: 'compass' },\n { id: 'e', title: \"\u0395' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-fuchsia-400 to-fuchsia-600', icon: 'atom' },\n { id: 'f', title: \"\u03a3\u03c4' \u03b4\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\", color: 'from-amber-400 to-amber-600', icon: 'trophy' },\n ];\n\n \/\/ \u03a0\u03c1\u03bf\u03b5\u03c0\u03b9\u03bb\u03b5\u03b3\u03bc\u03ad\u03bd\u03bf\u03b9 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03b9 (\u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03bb\u03bb\u03ac\u03be\u03b5\u03c4\u03b5 \u03b1\u03c0\u03cc \u03c4\u03bf modal)\n const defaultLinks = {\n a: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n b: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n c: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n d: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n e: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\",\n f: \"https:\/\/harlemcore.sites.sch.gr\/personal\/\"\n };\n\n const STORAGE_KEY = 'classLinks.v1';\n\n function getSavedLinks() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return { ...defaultLinks };\n const parsed = JSON.parse(raw);\n return { ...defaultLinks, ...parsed };\n } catch {\n return { ...defaultLinks };\n }\n }\n\n function saveLinks(links) {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(links));\n }\n\n function iconSVG(name) {\n const base = 'currentColor';\n switch (name) {\n case 'book':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M4 19.5A2.5 2.5 0 016.5 17H20\" \/>\n <path d=\"M20 22H6.5A2.5 2.5 0 014 19.5V6.5A2.5 2.5 0 016.5 4H20v18z\" \/>\n <\/svg>`;\n case 'pencil':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M12 20h9\" \/>\n <path d=\"M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4 12.5-12.5z\"\/>\n <\/svg>`;\n case 'light':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"5\"\/>\n <\/svg>`;\n case 'compass':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M16 8l-2.5 6.5L7 16l2.5-6.5L16 8z\"\/>\n <\/svg>`;\n case 'atom':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <circle cx=\"12\" cy=\"12\" r=\"1.8\" \/>\n <path d=\"M7 7c3-3 7-3 10 0s3 7 0 10-7 3-10 0-3-7 0-10z\"\/>\n <path d=\"M4 12h16M12 4v16\"\/>\n <\/svg>`;\n case 'trophy':\n return `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-9 h-9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${base}\" stroke-width=\"1.8\">\n <path d=\"M8 21h8M12 17v4\"\/>\n <path d=\"M7 4h10v4a5 5 0 11-10 0V4z\"\/>\n <path d=\"M5 6H3a3 3 0 003 3M19 6h2a3 3 0 01-3 3\"\/>\n <\/svg>`;\n default:\n return '';\n }\n }\n\n function makeTile({ id, title, color, icon }, url) {\n const link = url || defaultLinks[id];\n \/\/ Card\n const a = document.createElement('a');\n a.href = link;\n a.dataset.id = id;\n a.className = `relative tile tilt group overflow-hidden rounded-2xl bg-white\/95 shadow-[0_10px_30px_rgba(2,6,23,0.08)] ring-1 ring-black\/5 hover:shadow-[0_14px_40px_rgba(2,6,23,0.12)] transition`;\n\n \/\/ Gradient band\n const band = document.createElement('div');\n band.className = `absolute inset-x-0 top-0 h-1.5 bg-gradient-to-r ${color}`;\n a.appendChild(band);\n\n \/\/ Content\n const wrap = document.createElement('div');\n wrap.className = 'relative p-6 md:p-7 flex items-center gap-5';\n wrap.innerHTML = `\n <div class=\"shrink-0 rounded-xl p-3 text-white bg-gradient-to-br ${color} shadow-inner\">\n ${iconSVG(icon)}\n <\/div>\n <div class=\"min-w-0\">\n <h3 class=\"text-lg md:text-xl font-extrabold text-slate-900\">${title}<\/h3>\n <p class=\"text-slate-600 text-sm mt-1\">\u039c\u03b5\u03c4\u03ac\u03b2\u03b1\u03c3\u03b7 \u03c3\u03c4\u03b7 \u03c3\u03b5\u03bb\u03af\u03b4\u03b1 \u03c4\u03b7\u03c2 \u03c4\u03ac\u03be\u03b7\u03c2<\/p>\n <\/div>\n <div class=\"ml-auto text-slate-400 group-hover:text-slate-700 transition\">\n <svg class=\"tile-arrow w-6 h-6\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M5 12h14M13 5l7 7-7 7\"\/>\n <\/svg>\n <\/div>\n `;\n a.appendChild(wrap);\n\n \/\/ Ink effect on click\n a.addEventListener('click', (e) => {\n const ink = document.createElement('span');\n const rect = a.getBoundingClientRect();\n ink.className = 'ink';\n ink.style.left = (e.clientX - rect.left) + 'px';\n ink.style.top = (e.clientY - rect.top) + 'px';\n ink.style.width = ink.style.height = '20px';\n ink.style.background = 'currentColor';\n ink.style.color = '#0ea5e9';\n a.appendChild(ink);\n setTimeout(() => ink.remove(), 650);\n });\n\n \/\/ Subtle tilt on move\n a.addEventListener('mousemove', (e) => {\n const r = a.getBoundingClientRect();\n const x = e.clientX - r.left, y = e.clientY - r.top;\n const ry = ((x \/ r.width) - 0.5) * 6; \/\/ yaw\n const rx = -((y \/ r.height) - 0.5) * 6; \/\/ pitch\n a.style.setProperty('--rx', rx + 'deg');\n a.style.setProperty('--ry', ry + 'deg');\n });\n a.addEventListener('mouseleave', () => {\n a.style.setProperty('--rx', '0deg');\n a.style.setProperty('--ry', '0deg');\n });\n\n return a;\n }\n\n \/\/ Render tiles\n const grid = document.getElementById('tilesGrid');\n let links = getSavedLinks();\n function renderTiles() {\n \/\/ Selective updates: update or create per id\n const present = new Set();\n tiles.forEach(t => {\n present.add(t.id);\n const existing = grid.querySelector(`a[data-id=\"${t.id}\"]`);\n const url = links[t.id] || defaultLinks[t.id];\n if (existing) {\n if (existing.getAttribute('href') !== url) existing.setAttribute('href', url);\n } else {\n grid.appendChild(makeTile(t, url));\n }\n });\n \/\/ Remove any extra nodes not in tiles\n grid.querySelectorAll('a[data-id]').forEach(a => {\n if (!present.has(a.dataset.id)) a.remove();\n });\n }\n renderTiles();\n\n \/\/ Settings modal logic\n const modal = document.getElementById('settingsModal');\n const settingsBtn = document.getElementById('settingsBtn');\n const closeModal = document.getElementById('closeModal');\n const cancelLinks = document.getElementById('cancelLinks');\n const saveLinksBtn = document.getElementById('saveLinks');\n const resetLinksBtn = document.getElementById('resetLinks');\n\n const fields = {\n a: document.getElementById('link-a'),\n b: document.getElementById('link-b'),\n c: document.getElementById('link-c'),\n d: document.getElementById('link-d'),\n e: document.getElementById('link-e'),\n f: document.getElementById('link-f'),\n };\n\n function openModal() {\n \/\/ fill current values\n links = getSavedLinks();\n Object.keys(fields).forEach(k => fields[k].value = links[k] || '');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n \/\/ trap focus\n setTimeout(() => fields.a.focus(), 50);\n }\n function hideModal() {\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n settingsBtn.addEventListener('click', openModal);\n closeModal.addEventListener('click', hideModal);\n cancelLinks.addEventListener('click', hideModal);\n modal.addEventListener('click', (e) => { if (e.target === modal) hideModal(); });\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) hideModal(); });\n\n saveLinksBtn.addEventListener('click', () => {\n const updated = {};\n Object.keys(fields).forEach(k => {\n const val = fields[k].value.trim();\n updated[k] = val || defaultLinks[k];\n });\n saveLinks(updated);\n links = updated;\n renderTiles();\n hideModal();\n });\n\n resetLinksBtn.addEventListener('click', () => {\n if (confirm('\u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03cc\u03bb\u03c9\u03bd \u03c3\u03c4\u03b9\u03c2 \u03c0\u03c1\u03bf\u03b5\u03c0\u03b9\u03bb\u03b5\u03b3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2;')) {\n saveLinks(defaultLinks);\n links = { ...defaultLinks };\n Object.keys(fields).forEach(k => fields[k].value = links[k]);\n }\n });\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'97ef42bbf48e78bf',t:'MTc1Nzg0NjM2OC4wMDAwMDA='};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<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u03a0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03b1 \u03a0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03b1 – \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03cc \u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03b7\u03bd \u03b1\u03c1\u03c7\u03b9\u03ba\u03ae \u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd \u03a0\u03b1\u03c4\u03ae\u03c3\u03c4\u03b5 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c4\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03b2\u03b5\u03af\u03c4\u03b5 \u03c3\u03c4\u03b9\u03c2 \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03b5\u03bb\u03af\u03b4\u03b5\u03c2 \u03c4\u03bf\u03c5 \u03b9\u03c3\u03c4\u03bf\u03c4\u03cc\u03c0\u03bf\u03c5 \u03c3\u03b1\u03c2. \u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03c3\u03bc\u03c9\u03bd \u03c4\u03ac\u03be\u03b5\u03c9\u03bd \u039f\u03c1\u03af\u03c3\u03c4\u03b5 \u03c4\u03b9\u03c2 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b1\u03ba\u03af\u03b4\u03b9\u03bf. \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03b5\u03c4\u03b5 \u03c0\u03bb\u03ae\u03c1\u03b7 \u03ae \u03c3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03b4\u03b9\u03b5\u03cd\u03b8\u03c5\u03bd\u03c3\u03b7. \u039f\u03b9 \u03c1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c3\u03c4\u03b7 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae \u03c3\u03b1\u03c2. \u0391’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0392’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0393’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0394’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u0395’ \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd \u03a3\u03c4’…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2601","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts\/2601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2601"}],"version-history":[{"count":7,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts\/2601\/revisions"}],"predecessor-version":[{"id":2623,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=\/wp\/v2\/posts\/2601\/revisions\/2623"}],"wp:attachment":[{"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/harlemcore.sites.sch.gr\/personal\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}