Sz\u00ednez\u0151<\/title>\n \n <link rel=\"stylesheet\" href=\"\/egyseges-stilus.css\">\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Comic+Neue&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Csak a sz\u00ednez\u0151 specifikus st\u00edlusok maradnak itt *\/\n body {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: manipulation;\n }\n .container {\n max-width: 800px;\n width: 100%;\n background-color: white; \/* Vil\u00e1gos m\u00f3dban feh\u00e9r, darkban a glob\u00e1lis CSS fel\u00fcl\u00edrja *\/\n border-radius: 15px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n padding: 20px;\n margin-bottom: 20px;\n }\n .color-palette {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n }\n .color {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n border: 3px solid transparent;\n transition: transform 0.2s;\n }\n .color:hover, .color.active {\n transform: scale(1.1);\n border: 3px solid #333; \/* Ezt a sz\u00ednt is a glob\u00e1lis CSS-b\u0151l vehetn\u00e9nk *\/\n }\n .canvas-container {\n display: flex;\n justify-content: center;\n position: relative;\n margin-bottom: 20px;\n touch-action: none;\n }\n canvas {\n border: 2px solid #ddd;\n border-radius: 10px;\n background-color: white;\n max-width: 100%;\n height: auto;\n touch-action: none;\n }\n .controls {\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n .image-selector {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n .image-option {\n width: 60px;\n height: 60px;\n border: 2px solid #ddd;\n border-radius: 8px;\n cursor: pointer;\n object-fit: contain;\n transition: transform 0.2s;\n }\n .image-option:hover, .image-option.active {\n transform: scale(1.1);\n border: 2px solid var(--brand-accent); \/* Glob\u00e1lis CSS v\u00e1ltoz\u00f3 haszn\u00e1lata *\/\n }\n .toolbar {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n \/* A .tool-button \u00e9s .eraser-button st\u00edlusok a glob\u00e1lis CSS-b\u0151l j\u00f6nnek *\/\n @media (max-width: 600px) {\n .color { width: 35px; height: 35px; }\n .image-option { width: 50px; height: 50px; }\n }\n :fullscreen .container {\n max-width: none;\n width: 100vw;\n height: 100vh;\n padding: 0;\n border-radius: 0;\n box-shadow: none;\n }\n :fullscreen canvas {\n width: 100vw !important;\n height: auto !important;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"color-palette\">\n <div class=\"color active\" style=\"background-color: #000000;\" data-color=\"#000000\"><\/div>\n <div class=\"color\" style=\"background-color: #ff6b6b;\" data-color=\"#ff6b6b\"><\/div>\n <div class=\"color\" style=\"background-color: #4ecdc4;\" data-color=\"#4ecdc4\"><\/div>\n <div class=\"color\" style=\"background-color: #ffcc5c;\" data-color=\"#ffcc5c\"><\/div>\n <div class=\"color\" style=\"background-color: #88d8b0;\" data-color=\"#88d8b0\"><\/div>\n <div class=\"color\" style=\"background-color: #ff8a5c;\" data-color=\"#ff8a5c\"><\/div>\n <div class=\"color\" style=\"background-color: #a5668b;\" data-color=\"#a5668b\"><\/div>\n <div class=\"color\" style=\"background-color: #69b7ff;\" data-color=\"#69b7ff\"><\/div>\n <div class=\"color\" style=\"background-color: #ffffff;\" data-color=\"#ffffff\"><\/div>\n <\/div>\n <div class=\"toolbar\">\n <button class=\"tool-button active\" data-size=\"5\">Kicsi ceruza<\/button>\n <button class=\"tool-button\" data-size=\"10\">K\u00f6zepes ceruza<\/button>\n <button class=\"tool-button\" data-size=\"15\">Nagy ceruza<\/button>\n <button class=\"tool-button eraser-button\" data-tool=\"eraser\">Rad\u00edr<\/button>\n <\/div>\n <div class=\"canvas-container\">\n <canvas id=\"coloringCanvas\"><\/canvas>\n <\/div>\n <div class=\"controls\">\n <button id=\"clearBtn\">\u00dajrakezd\u00e9s<\/button>\n <button id=\"saveBtn\">Ment\u00e9s<\/button>\n <button id=\"fullscreenBtn\">Teljes k\u00e9perny\u0151<\/button>\n <\/div>\n <div class=\"image-selector\" id=\"imageSelector\"><\/div>\n <\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const canvas = document.getElementById(\"coloringCanvas\");\n const ctx = canvas.getContext(\"2d\");\n const colorPalette = document.querySelector(\".color-palette\");\n const clearBtn = document.getElementById(\"clearBtn\");\n const saveBtn = document.getElementById(\"saveBtn\");\n const imageSelector = document.getElementById(\"imageSelector\");\n const toolbar = document.querySelector(\".toolbar\"); \/\/ \u00daj: eszk\u00f6zt\u00e1r elem\n const toolButtons = toolbar.querySelectorAll(\".tool-button\"); \/\/ \u00daj: eszk\u00f6zt\u00e1r gombok\n\n let currentColor = \"#000000\";\n let currentTool = \"pencil\"; \/\/ \u00daj: jelenlegi eszk\u00f6z (ceruza vagy rad\u00edr)\n let currentSize = 5; \/\/ \u00daj: ceruza\/rad\u00edr vastags\u00e1g\n let isDrawing = false;\n let lastX = 0;\n let lastY = 0;\n let selectedImage = null;\n \/\/ floodFillActive m\u00e1r nincs haszn\u00e1lva\n\n \/\/ K\u00e9pek bet\u00f6lt\u00e9se (1-t\u0151l 5-ig)\n const imageUrls = [];\n for (let i = 1; i <= 5; i++) {\n const num = i < 10 ? \"0\" + i : i;\n imageUrls.push(`https:\/\/book.filemondr.hu\/kepek\/s${num}.png`);\n }\n\n \/\/ K\u00e9pv\u00e1laszt\u00f3 l\u00e9trehoz\u00e1sa\n imageUrls.forEach((url, index) => {\n const img = document.createElement(\"img\");\n img.src = url;\n img.classList.add(\"image-option\");\n img.dataset.index = index;\n img.onerror = function() {\n console.error(\"Nem siker\u00fclt bet\u00f6lteni a k\u00e9pet:\", url);\n img.remove();\n };\n img.addEventListener(\"click\", () => selectImage(img, url));\n imageSelector.appendChild(img);\n\n if (index === 0) {\n img.onload = function() {\n selectImage(img, url);\n }\n if (img.complete) {\n selectImage(img, url);\n }\n }\n });\n\n \/\/ K\u00e9p kiv\u00e1laszt\u00e1sa\n function selectImage(imgElement, url) {\n document.querySelectorAll(\".image-option\").forEach(img => {\n img.classList.remove(\"active\");\n });\n imgElement.classList.add(\"active\");\n\n const img = new Image();\n img.crossOrigin = \"Anonymous\";\n img.onload = function() {\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0);\n selectedImage = img;\n \/\/ Alap\u00e9rtelmezett ceruza vastags\u00e1g be\u00e1ll\u00edt\u00e1sa k\u00e9pv\u00e1lt\u00e1skor\n ctx.lineWidth = currentSize;\n ctx.strokeStyle = currentColor; \/\/ Alap\u00e9rtelmezett sz\u00edn be\u00e1ll\u00edt\u00e1sa is\n };\n img.src = url;\n }\n\n \/\/ Sz\u00ednv\u00e1laszt\u00e1s\n colorPalette.addEventListener(\"click\", function(e) {\n if (e.target.classList.contains(\"color\")) {\n document.querySelectorAll(\".color\").forEach(color => {\n color.classList.remove(\"active\");\n });\n e.target.classList.add(\"active\");\n currentColor = e.target.dataset.color;\n\n \/\/ Ha ceruza m\u00f3d akt\u00edv, \u00e1ll\u00edtsuk be a strokeStyle-t az \u00faj sz\u00ednre\n if (currentTool === \"pencil\") {\n ctx.strokeStyle = currentColor;\n }\n \/\/ Ha rad\u00edr m\u00f3d akt\u00edv, a strokeStyle feh\u00e9r marad\n }\n });\n\n \/\/ Eszk\u00f6zt\u00e1r kezel\u00e9se\n toolbar.addEventListener(\"click\", function(e) {\n if (e.target.classList.contains(\"tool-button\")) {\n toolButtons.forEach(btn => btn.classList.remove(\"active\"));\n e.target.classList.add(\"active\");\n\n const tool = e.target.dataset.tool;\n const size = e.target.dataset.size;\n\n if (tool === \"eraser\") {\n currentTool = \"eraser\";\n ctx.strokeStyle = \"#ffffff\"; \/\/ Rad\u00edr sz\u00edne: feh\u00e9r\n currentSize = size ? parseInt(size) : 10; \/\/ Alap rad\u00edr m\u00e9ret ha nincs megadva\n ctx.lineWidth = currentSize;\n } else {\n currentTool = \"pencil\";\n currentSize = size ? parseInt(size) : 5; \/\/ Alap ceruza m\u00e9ret ha nincs megadva\n ctx.lineWidth = currentSize;\n \/\/ Ceruza m\u00f3d eset\u00e9n vissza\u00e1ll\u00edtjuk a strokeStyle-t az aktu\u00e1lis sz\u00ednre\n ctx.strokeStyle = currentColor;\n }\n }\n });\n\n \/\/ Rajzol\u00e1s esem\u00e9nykezel\u0151k\n function startDrawing(e) {\n isDrawing = true;\n const pos = getPosition(e);\n lastX = pos.x;\n lastY = pos.y;\n\n \/\/ Flood fill (kit\u00f6lt\u00e9s) csak ha a ceruza eszk\u00f6z akt\u00edv \u00e9s dupl\u00e1n kattintunk\/\u00e9rint\u00fcnk\n if (currentTool === \"pencil\" && (e.type === \"mousedown\" && e.detail === 2 ||\n e.type === \"touchstart\" && e.touches.length === 1)) {\n floodFill(Math.floor(pos.x), Math.floor(pos.y), currentColor);\n }\n }\n\n function draw(e) {\n if (!isDrawing) return;\n e.preventDefault();\n\n const pos = getPosition(e);\n ctx.beginPath();\n \/\/ A strokeStyle \u00e9s lineWidth m\u00e1r be van \u00e1ll\u00edtva az eszk\u00f6zt\u00e1r kezel\u0151ben\n ctx.moveTo(lastX, lastY);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n\n lastX = pos.x;\n lastY = pos.y;\n }\n\n function stopDrawing() {\n isDrawing = false;\n }\n\n \/\/ Eg\u00e9r \u00e9s \u00e9rint\u00e9s poz\u00edci\u00f3 lek\u00e9r\u00e9se\n function getPosition(e) {\n const rect = canvas.getBoundingClientRect();\n let x, y;\n\n if (e.type.includes(\"touch\")) {\n x = e.touches[0].clientX - rect.left;\n y = e.touches[0].clientY - rect.top;\n } else {\n x = e.clientX - rect.left;\n y = e.clientY - rect.top;\n }\n\n \/\/ Sk\u00e1l\u00e1z\u00e1s a canvas m\u00e9ret\u00e9hez\n x = x * (canvas.width \/ rect.width);\n y = y * (canvas.height \/ rect.height);\n\n return { x, y };\n }\n\n \/\/ Flood fill algoritmus (kit\u00f6lt\u00e9s) - Maradt a r\u00e9gi logik\u00e1val, csak a ceruza m\u00f3d ellen\u0151rz\u00e9se ker\u00fclt bele\n function floodFill(x, y, fillColor) {\n \/\/ Sz\u00ednek \u00e1talak\u00edt\u00e1sa RGBA form\u00e1tumra\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n \/\/ A kiindul\u00e1si pont sz\u00edne\n const targetColor = getPixelColor(imageData, x, y);\n const fillColorRgb = hexToRgb(fillColor);\n\n \/\/ Ha a c\u00e9l sz\u00edn megegyezik a kit\u00f6lt\u0151 sz\u00ednnel, nincs mit tenni\n if (colorsMatch(targetColor, fillColorRgb)) {\n return;\n }\n\n const queue = [];\n queue.push([x, y]);\n\n const visited = new Set();\n visited.add(`${x},${y}`);\n\n while (queue.length > 0) {\n const [currentX, currentY] = queue.shift();\n\n if (\n currentX < 0 ||\n currentY < 0 ||\n currentX >= canvas.width ||\n currentY >= canvas.height\n ) {\n continue;\n }\n\n const currentColor = getPixelColor(imageData, currentX, currentY);\n if (!colorsMatch(currentColor, targetColor)) {\n continue;\n }\n\n setPixelColor(imageData, currentX, currentY, fillColorRgb);\n\n const neighbors = [\n [currentX + 1, currentY],\n [currentX - 1, currentY],\n [currentX, currentY + 1],\n [currentX, currentY - 1]\n ];\n\n neighbors.forEach(neighbor => {\n const [nX, nY] = neighbor;\n const key = `${nX},${nY}`;\n if (!visited.has(key)) {\n visited.add(key);\n queue.push(neighbor);\n }\n });\n }\n\n ctx.putImageData(imageData, 0, 0);\n }\n\n \/\/ Seg\u00e9df\u00fcggv\u00e9nyek a flood fill algoritmushoz - V\u00e1ltozatlan\n function getPixelColor(imageData, x, y) {\n const index = (y * imageData.width + x) * 4;\n return {\n r: imageData.data[index],\n g: imageData.data[index + 1],\n b: imageData.data[index + 2],\n a: imageData.data[index + 3]\n };\n }\n\n function setPixelColor(imageData, x, y, color) {\n const index = (y * imageData.width + x) * 4;\n imageData.data[index] = color.r;\n imageData.data[index + 1] = color.g;\n imageData.data[index + 2] = color.b;\n imageData.data[index + 3] = 255; \/\/ Teljesen \u00e1tl\u00e1tszatlan\n }\n\n function colorsMatch(color1, color2) {\n const dr = color1.r - color2.r;\n const dg = color1.g - color2.g;\n const db = color1.b - color2.b;\n const distance = Math.sqrt(dr * dr + dg * dg + db * db);\n const threshold = 40;\n return distance < threshold;\n }\n\n function hexToRgb(hex) {\n const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n }\n : { r: 0, g: 0, b: 0 };\n }\n\n \/\/ Esem\u00e9nykezel\u0151k hozz\u00e1ad\u00e1sa\n canvas.addEventListener(\"mousedown\", startDrawing);\n canvas.addEventListener(\"mousemove\", draw);\n canvas.addEventListener(\"mouseup\", stopDrawing);\n canvas.addEventListener(\"mouseout\", stopDrawing);\n\n \/\/ \u00c9rint\u0151k\u00e9perny\u0151 t\u00e1mogat\u00e1s\n canvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\n canvas.addEventListener(\"touchmove\", draw, { passive: false });\n canvas.addEventListener(\"touchend\", stopDrawing, { passive: false });\n\n \/\/ \u00dajrakezd\u00e9s gomb\n clearBtn.addEventListener(\"click\", function() {\n if (selectedImage) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(selectedImage, 0, 0);\n \/\/ \u00dajrakezd\u00e9skor vissza\u00e1ll\u00edtjuk az eszk\u00f6zt\u00e1rat a kicsi ceruz\u00e1ra\n toolButtons.forEach(btn => btn.classList.remove(\"active\"));\n const defaultToolButton = toolbar.querySelector('[data-size=\"5\"]');\n if (defaultToolButton) {\n defaultToolButton.classList.add(\"active\");\n currentTool = \"pencil\";\n currentSize = 5;\n ctx.lineWidth = currentSize;\n ctx.strokeStyle = currentColor;\n }\n }\n });\n\n \/\/ Ment\u00e9s gomb\n saveBtn.addEventListener(\"click\", function() {\n const link = document.createElement(\"a\");\n link.download = \"szinezo.png\"; \/\/ M\u00f3dos\u00edtottam a f\u00e1jlnevet\n link.href = canvas.toDataURL(\"image\/png\");\n link.click();\n });\n\n \/\/ Megakad\u00e1lyozzuk az alap\u00e9rtelmezett \u00e9rint\u0151k\u00e9perny\u0151 viselked\u00e9st a canvason\n document.body.addEventListener(\"touchstart\", function(e) {\n if (e.target !== canvas) return true;\n e.preventDefault();\n }, { passive: false });\n\n document.body.addEventListener(\"touchmove\", function(e) {\n if (e.target !== canvas) return true;\n e.preventDefault();\n }, { passive: false });\n\n document.body.addEventListener(\"touchend\", function(e) {\n if (e.target !== canvas) return true;\n \/\/ Nem kell preventDefault a touchend-n\u00e9l\n }, { passive: false });\n\n \/\/ Kezdeti eszk\u00f6zt\u00e1r be\u00e1ll\u00edt\u00e1s (kicsi ceruza akt\u00edv)\n const initialToolButton = toolbar.querySelector('[data-size=\"5\"]');\n if (initialToolButton) {\n initialToolButton.classList.add(\"active\");\n currentTool = \"pencil\";\n currentSize = 5;\n ctx.lineWidth = currentSize;\n ctx.strokeStyle = currentColor;\n }\n \n const fullscreenBtn = document.getElementById(\"fullscreenBtn\");\n\n fullscreenBtn.addEventListener(\"click\", function () {\n const elem = document.documentElement;\n if (!document.fullscreenElement) {\n if (elem.requestFullscreen) {\n elem.requestFullscreen();\n } else if (elem.webkitRequestFullscreen) {\n elem.webkitRequestFullscreen();\n } else if (elem.msRequestFullscreen) {\n elem.msRequestFullscreen();\n }\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n document.msExitFullscreen();\n }\n }\n });\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sz\u00ednez\u0151 Kicsi ceruza K\u00f6zepes ceruza Nagy ceruza Rad\u00edr \u00dajrakezd\u00e9s Ment\u00e9s Teljes k\u00e9perny\u0151<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-240","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":20,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/240\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/240\/revisions\/496"}],"wp:attachment":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/media?parent=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":240,"date":"2025-05-12T16:35:40","date_gmt":"2025-05-12T16:35:40","guid":{"rendered":"https:\/\/book.filemondr.hu\/?page_id=240"},"modified":"2025-06-03T14:48:27","modified_gmt":"2025-06-03T14:48:27","slug":"szinezo","status":"publish","type":"page","link":"https:\/\/book.filemondr.hu\/index.php\/szinezo\/","title":{"rendered":"Szinez\u0151"},"content":{"rendered":"\n\n\n\n \n \n Sz\u00ednez\u0151<\/title>\n \n <link rel=\"stylesheet\" href=\"\/egyseges-stilus.css\">\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Comic+Neue&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Csak a sz\u00ednez\u0151 specifikus st\u00edlusok maradnak itt *\/\n body {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: manipulation;\n }\n .container {\n max-width: 800px;\n width: 100%;\n background-color: white; \/* Vil\u00e1gos m\u00f3dban feh\u00e9r, darkban a glob\u00e1lis CSS fel\u00fcl\u00edrja *\/\n border-radius: 15px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n padding: 20px;\n margin-bottom: 20px;\n }\n .color-palette {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n }\n .color {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n border: 3px solid transparent;\n transition: transform 0.2s;\n }\n .color:hover, .color.active {\n transform: scale(1.1);\n border: 3px solid #333; \/* Ezt a sz\u00ednt is a glob\u00e1lis CSS-b\u0151l vehetn\u00e9nk *\/\n }\n .canvas-container {\n display: flex;\n justify-content: center;\n position: relative;\n margin-bottom: 20px;\n touch-action: none;\n }\n canvas {\n border: 2px solid #ddd;\n border-radius: 10px;\n background-color: white;\n max-width: 100%;\n height: auto;\n touch-action: none;\n }\n .controls {\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n .image-selector {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n .image-option {\n width: 60px;\n height: 60px;\n border: 2px solid #ddd;\n border-radius: 8px;\n cursor: pointer;\n object-fit: contain;\n transition: transform 0.2s;\n }\n .image-option:hover, .image-option.active {\n transform: scale(1.1);\n border: 2px solid var(--brand-accent); \/* Glob\u00e1lis CSS v\u00e1ltoz\u00f3 haszn\u00e1lata *\/\n }\n .toolbar {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n \/* A .tool-button \u00e9s .eraser-button st\u00edlusok a glob\u00e1lis CSS-b\u0151l j\u00f6nnek *\/\n @media (max-width: 600px) {\n .color { width: 35px; height: 35px; }\n .image-option { width: 50px; height: 50px; }\n }\n :fullscreen .container {\n max-width: none;\n width: 100vw;\n height: 100vh;\n padding: 0;\n border-radius: 0;\n box-shadow: none;\n }\n :fullscreen canvas {\n width: 100vw !important;\n height: auto !important;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"color-palette\">\n <div class=\"color active\" style=\"background-color: #000000;\" data-color=\"#000000\"><\/div>\n <div class=\"color\" style=\"background-color: #ff6b6b;\" data-color=\"#ff6b6b\"><\/div>\n <div class=\"color\" style=\"background-color: #4ecdc4;\" data-color=\"#4ecdc4\"><\/div>\n <div class=\"color\" style=\"background-color: #ffcc5c;\" data-color=\"#ffcc5c\"><\/div>\n <div class=\"color\" style=\"background-color: #88d8b0;\" data-color=\"#88d8b0\"><\/div>\n <div class=\"color\" style=\"background-color: #ff8a5c;\" data-color=\"#ff8a5c\"><\/div>\n <div class=\"color\" style=\"background-color: #a5668b;\" data-color=\"#a5668b\"><\/div>\n <div class=\"color\" style=\"background-color: #69b7ff;\" data-color=\"#69b7ff\"><\/div>\n <div class=\"color\" style=\"background-color: #ffffff;\" data-color=\"#ffffff\"><\/div>\n <\/div>\n <div class=\"toolbar\">\n <button class=\"tool-button active\" data-size=\"5\">Kicsi ceruza<\/button>\n <button class=\"tool-button\" data-size=\"10\">K\u00f6zepes ceruza<\/button>\n <button class=\"tool-button\" data-size=\"15\">Nagy ceruza<\/button>\n <button class=\"tool-button eraser-button\" data-tool=\"eraser\">Rad\u00edr<\/button>\n <\/div>\n <div class=\"canvas-container\">\n <canvas id=\"coloringCanvas\"><\/canvas>\n <\/div>\n <div class=\"controls\">\n <button id=\"clearBtn\">\u00dajrakezd\u00e9s<\/button>\n <button id=\"saveBtn\">Ment\u00e9s<\/button>\n <button id=\"fullscreenBtn\">Teljes k\u00e9perny\u0151<\/button>\n <\/div>\n <div class=\"image-selector\" id=\"imageSelector\"><\/div>\n <\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const canvas = document.getElementById(\"coloringCanvas\");\n const ctx = canvas.getContext(\"2d\");\n const colorPalette = document.querySelector(\".color-palette\");\n const clearBtn = document.getElementById(\"clearBtn\");\n const saveBtn = document.getElementById(\"saveBtn\");\n const imageSelector = document.getElementById(\"imageSelector\");\n const toolbar = document.querySelector(\".toolbar\"); \/\/ \u00daj: eszk\u00f6zt\u00e1r elem\n const toolButtons = toolbar.querySelectorAll(\".tool-button\"); \/\/ \u00daj: eszk\u00f6zt\u00e1r gombok\n\n let currentColor = \"#000000\";\n let currentTool = \"pencil\"; \/\/ \u00daj: jelenlegi eszk\u00f6z (ceruza vagy rad\u00edr)\n let currentSize = 5; \/\/ \u00daj: ceruza\/rad\u00edr vastags\u00e1g\n let isDrawing = false;\n let lastX = 0;\n let lastY = 0;\n let selectedImage = null;\n \/\/ floodFillActive m\u00e1r nincs haszn\u00e1lva\n\n \/\/ K\u00e9pek bet\u00f6lt\u00e9se (1-t\u0151l 5-ig)\n const imageUrls = [];\n for (let i = 1; i <= 5; i++) {\n const num = i < 10 ? \"0\" + i : i;\n imageUrls.push(`https:\/\/book.filemondr.hu\/kepek\/s${num}.png`);\n }\n\n \/\/ K\u00e9pv\u00e1laszt\u00f3 l\u00e9trehoz\u00e1sa\n imageUrls.forEach((url, index) => {\n const img = document.createElement(\"img\");\n img.src = url;\n img.classList.add(\"image-option\");\n img.dataset.index = index;\n img.onerror = function() {\n console.error(\"Nem siker\u00fclt bet\u00f6lteni a k\u00e9pet:\", url);\n img.remove();\n };\n img.addEventListener(\"click\", () => selectImage(img, url));\n imageSelector.appendChild(img);\n\n if (index === 0) {\n img.onload = function() {\n selectImage(img, url);\n }\n if (img.complete) {\n selectImage(img, url);\n }\n }\n });\n\n \/\/ K\u00e9p kiv\u00e1laszt\u00e1sa\n function selectImage(imgElement, url) {\n document.querySelectorAll(\".image-option\").forEach(img => {\n img.classList.remove(\"active\");\n });\n imgElement.classList.add(\"active\");\n\n const img = new Image();\n img.crossOrigin = \"Anonymous\";\n img.onload = function() {\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0);\n selectedImage = img;\n \/\/ Alap\u00e9rtelmezett ceruza vastags\u00e1g be\u00e1ll\u00edt\u00e1sa k\u00e9pv\u00e1lt\u00e1skor\n ctx.lineWidth = currentSize;\n ctx.strokeStyle = currentColor; \/\/ Alap\u00e9rtelmezett sz\u00edn be\u00e1ll\u00edt\u00e1sa is\n };\n img.src = url;\n }\n\n \/\/ Sz\u00ednv\u00e1laszt\u00e1s\n colorPalette.addEventListener(\"click\", function(e) {\n if (e.target.classList.contains(\"color\")) {\n document.querySelectorAll(\".color\").forEach(color => {\n color.classList.remove(\"active\");\n });\n e.target.classList.add(\"active\");\n currentColor = e.target.dataset.color;\n\n \/\/ Ha ceruza m\u00f3d akt\u00edv, \u00e1ll\u00edtsuk be a strokeStyle-t az \u00faj sz\u00ednre\n if (currentTool === \"pencil\") {\n ctx.strokeStyle = currentColor;\n }\n \/\/ Ha rad\u00edr m\u00f3d akt\u00edv, a strokeStyle feh\u00e9r marad\n }\n });\n\n \/\/ Eszk\u00f6zt\u00e1r kezel\u00e9se\n toolbar.addEventListener(\"click\", function(e) {\n if (e.target.classList.contains(\"tool-button\")) {\n toolButtons.forEach(btn => btn.classList.remove(\"active\"));\n e.target.classList.add(\"active\");\n\n const tool = e.target.dataset.tool;\n const size = e.target.dataset.size;\n\n if (tool === \"eraser\") {\n currentTool = \"eraser\";\n ctx.strokeStyle = \"#ffffff\"; \/\/ Rad\u00edr sz\u00edne: feh\u00e9r\n currentSize = size ? parseInt(size) : 10; \/\/ Alap rad\u00edr m\u00e9ret ha nincs megadva\n ctx.lineWidth = currentSize;\n } else {\n currentTool = \"pencil\";\n currentSize = size ? parseInt(size) : 5; \/\/ Alap ceruza m\u00e9ret ha nincs megadva\n ctx.lineWidth = currentSize;\n \/\/ Ceruza m\u00f3d eset\u00e9n vissza\u00e1ll\u00edtjuk a strokeStyle-t az aktu\u00e1lis sz\u00ednre\n ctx.strokeStyle = currentColor;\n }\n }\n });\n\n \/\/ Rajzol\u00e1s esem\u00e9nykezel\u0151k\n function startDrawing(e) {\n isDrawing = true;\n const pos = getPosition(e);\n lastX = pos.x;\n lastY = pos.y;\n\n \/\/ Flood fill (kit\u00f6lt\u00e9s) csak ha a ceruza eszk\u00f6z akt\u00edv \u00e9s dupl\u00e1n kattintunk\/\u00e9rint\u00fcnk\n if (currentTool === \"pencil\" && (e.type === \"mousedown\" && e.detail === 2 ||\n e.type === \"touchstart\" && e.touches.length === 1)) {\n floodFill(Math.floor(pos.x), Math.floor(pos.y), currentColor);\n }\n }\n\n function draw(e) {\n if (!isDrawing) return;\n e.preventDefault();\n\n const pos = getPosition(e);\n ctx.beginPath();\n \/\/ A strokeStyle \u00e9s lineWidth m\u00e1r be van \u00e1ll\u00edtva az eszk\u00f6zt\u00e1r kezel\u0151ben\n ctx.moveTo(lastX, lastY);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n\n lastX = pos.x;\n lastY = pos.y;\n }\n\n function stopDrawing() {\n isDrawing = false;\n }\n\n \/\/ Eg\u00e9r \u00e9s \u00e9rint\u00e9s poz\u00edci\u00f3 lek\u00e9r\u00e9se\n function getPosition(e) {\n const rect = canvas.getBoundingClientRect();\n let x, y;\n\n if (e.type.includes(\"touch\")) {\n x = e.touches[0].clientX - rect.left;\n y = e.touches[0].clientY - rect.top;\n } else {\n x = e.clientX - rect.left;\n y = e.clientY - rect.top;\n }\n\n \/\/ Sk\u00e1l\u00e1z\u00e1s a canvas m\u00e9ret\u00e9hez\n x = x * (canvas.width \/ rect.width);\n y = y * (canvas.height \/ rect.height);\n\n return { x, y };\n }\n\n \/\/ Flood fill algoritmus (kit\u00f6lt\u00e9s) - Maradt a r\u00e9gi logik\u00e1val, csak a ceruza m\u00f3d ellen\u0151rz\u00e9se ker\u00fclt bele\n function floodFill(x, y, fillColor) {\n \/\/ Sz\u00ednek \u00e1talak\u00edt\u00e1sa RGBA form\u00e1tumra\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n \/\/ A kiindul\u00e1si pont sz\u00edne\n const targetColor = getPixelColor(imageData, x, y);\n const fillColorRgb = hexToRgb(fillColor);\n\n \/\/ Ha a c\u00e9l sz\u00edn megegyezik a kit\u00f6lt\u0151 sz\u00ednnel, nincs mit tenni\n if (colorsMatch(targetColor, fillColorRgb)) {\n return;\n }\n\n const queue = [];\n queue.push([x, y]);\n\n const visited = new Set();\n visited.add(`${x},${y}`);\n\n while (queue.length > 0) {\n const [currentX, currentY] = queue.shift();\n\n if (\n currentX < 0 ||\n currentY < 0 ||\n currentX >= canvas.width ||\n currentY >= canvas.height\n ) {\n continue;\n }\n\n const currentColor = getPixelColor(imageData, currentX, currentY);\n if (!colorsMatch(currentColor, targetColor)) {\n continue;\n }\n\n setPixelColor(imageData, currentX, currentY, fillColorRgb);\n\n const neighbors = [\n [currentX + 1, currentY],\n [currentX - 1, currentY],\n [currentX, currentY + 1],\n [currentX, currentY - 1]\n ];\n\n neighbors.forEach(neighbor => {\n const [nX, nY] = neighbor;\n const key = `${nX},${nY}`;\n if (!visited.has(key)) {\n visited.add(key);\n queue.push(neighbor);\n }\n });\n }\n\n ctx.putImageData(imageData, 0, 0);\n }\n\n \/\/ Seg\u00e9df\u00fcggv\u00e9nyek a flood fill algoritmushoz - V\u00e1ltozatlan\n function getPixelColor(imageData, x, y) {\n const index = (y * imageData.width + x) * 4;\n return {\n r: imageData.data[index],\n g: imageData.data[index + 1],\n b: imageData.data[index + 2],\n a: imageData.data[index + 3]\n };\n }\n\n function setPixelColor(imageData, x, y, color) {\n const index = (y * imageData.width + x) * 4;\n imageData.data[index] = color.r;\n imageData.data[index + 1] = color.g;\n imageData.data[index + 2] = color.b;\n imageData.data[index + 3] = 255; \/\/ Teljesen \u00e1tl\u00e1tszatlan\n }\n\n function colorsMatch(color1, color2) {\n const dr = color1.r - color2.r;\n const dg = color1.g - color2.g;\n const db = color1.b - color2.b;\n const distance = Math.sqrt(dr * dr + dg * dg + db * db);\n const threshold = 40;\n return distance < threshold;\n }\n\n function hexToRgb(hex) {\n const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n }\n : { r: 0, g: 0, b: 0 };\n }\n\n \/\/ Esem\u00e9nykezel\u0151k hozz\u00e1ad\u00e1sa\n canvas.addEventListener(\"mousedown\", startDrawing);\n canvas.addEventListener(\"mousemove\", draw);\n canvas.addEventListener(\"mouseup\", stopDrawing);\n canvas.addEventListener(\"mouseout\", stopDrawing);\n\n \/\/ \u00c9rint\u0151k\u00e9perny\u0151 t\u00e1mogat\u00e1s\n canvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\n canvas.addEventListener(\"touchmove\", draw, { passive: false });\n canvas.addEventListener(\"touchend\", stopDrawing, { passive: false });\n\n \/\/ \u00dajrakezd\u00e9s gomb\n clearBtn.addEventListener(\"click\", function() {\n if (selectedImage) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(selectedImage, 0, 0);\n \/\/ \u00dajrakezd\u00e9skor vissza\u00e1ll\u00edtjuk az eszk\u00f6zt\u00e1rat a kicsi ceruz\u00e1ra\n toolButtons.forEach(btn => btn.classList.remove(\"active\"));\n const defaultToolButton = toolbar.querySelector('[data-size=\"5\"]');\n if (defaultToolButton) {\n defaultToolButton.classList.add(\"active\");\n currentTool = \"pencil\";\n currentSize = 5;\n ctx.lineWidth = currentSize;\n ctx.strokeStyle = currentColor;\n }\n }\n });\n\n \/\/ Ment\u00e9s gomb\n saveBtn.addEventListener(\"click\", function() {\n const link = document.createElement(\"a\");\n link.download = \"szinezo.png\"; \/\/ M\u00f3dos\u00edtottam a f\u00e1jlnevet\n link.href = canvas.toDataURL(\"image\/png\");\n link.click();\n });\n\n \/\/ Megakad\u00e1lyozzuk az alap\u00e9rtelmezett \u00e9rint\u0151k\u00e9perny\u0151 viselked\u00e9st a canvason\n document.body.addEventListener(\"touchstart\", function(e) {\n if (e.target !== canvas) return true;\n e.preventDefault();\n }, { passive: false });\n\n document.body.addEventListener(\"touchmove\", function(e) {\n if (e.target !== canvas) return true;\n e.preventDefault();\n }, { passive: false });\n\n document.body.addEventListener(\"touchend\", function(e) {\n if (e.target !== canvas) return true;\n \/\/ Nem kell preventDefault a touchend-n\u00e9l\n }, { passive: false });\n\n \/\/ Kezdeti eszk\u00f6zt\u00e1r be\u00e1ll\u00edt\u00e1s (kicsi ceruza akt\u00edv)\n const initialToolButton = toolbar.querySelector('[data-size=\"5\"]');\n if (initialToolButton) {\n initialToolButton.classList.add(\"active\");\n currentTool = \"pencil\";\n currentSize = 5;\n ctx.lineWidth = currentSize;\n ctx.strokeStyle = currentColor;\n }\n \n const fullscreenBtn = document.getElementById(\"fullscreenBtn\");\n\n fullscreenBtn.addEventListener(\"click\", function () {\n const elem = document.documentElement;\n if (!document.fullscreenElement) {\n if (elem.requestFullscreen) {\n elem.requestFullscreen();\n } else if (elem.webkitRequestFullscreen) {\n elem.webkitRequestFullscreen();\n } else if (elem.msRequestFullscreen) {\n elem.msRequestFullscreen();\n }\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n document.msExitFullscreen();\n }\n }\n });\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sz\u00ednez\u0151 Kicsi ceruza K\u00f6zepes ceruza Nagy ceruza Rad\u00edr \u00dajrakezd\u00e9s Ment\u00e9s Teljes k\u00e9perny\u0151<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-240","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":20,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/240\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/240\/revisions\/496"}],"wp:attachment":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/media?parent=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}