{"id":610,"date":"2025-07-05T13:13:01","date_gmt":"2025-07-05T13:13:01","guid":{"rendered":"https:\/\/book.filemondr.hu\/?page_id=610"},"modified":"2025-07-06T05:41:58","modified_gmt":"2025-07-06T05:41:58","slug":"aa","status":"publish","type":"page","link":"https:\/\/book.filemondr.hu\/index.php\/aa\/","title":{"rendered":"aa"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"hu\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Egyszer\u0171 \u00c9p\u00edt\u0151j\u00e1t\u00e9k Dem\u00f3<\/title>\n  <style>\n    body {\n      margin: 0;\n      overflow: hidden; \/* Ne legyen scroll, ha valami kil\u00f3g *\/\n      background-color: #f0f0f0;\n      font-family: Arial, sans-serif;\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n\n    #playground {\n      flex-grow: 1; \/* Kit\u00f6lti a rendelkez\u00e9sre \u00e1ll\u00f3 helyet *\/\n      background-color: #a0d9b1; \/* F\u0171-z\u00f6ld *\/\n      position: relative; \/* Az abszol\u00fat poz\u00edci\u00f3j\u00fa elemeknek alapja *\/\n      overflow: hidden;\n      border-bottom: 2px solid #5a8e6e;\n    }\n\n    #toolbar {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 15px;\n      background-color: #333;\n      box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);\n    }\n\n    .tool-item {\n      width: 70px;\n      height: 70px;\n      margin: 0 10px;\n      background-color: #eee;\n      border: 3px solid transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      font-weight: bold;\n      font-size: 1.2em;\n      transition: all 0.2s ease;\n      color: #333;\n    }\n\n    .tool-item:hover {\n      background-color: #fff;\n    }\n\n    .tool-item.selected {\n      border-color: #ffb347;\n      box-shadow: 0 0 12px rgba(255, 179, 71, 0.7);\n      transform: scale(1.05);\n    }\n\n    \/* \u00c9p\u00edt\u0151elemek st\u00edlusai *\/\n    .building-block {\n      position: absolute;\n      width: 80px;\n      height: 80px;\n      background-color: #f00; \/* Alap\u00e9rtelmezett sz\u00edn, JavaScript fel\u00fcl\u00edrja *\/\n      border: 2px solid rgba(0, 0, 0, 0.3);\n      box-sizing: border-box;\n      transition: transform 0.1s ease-out; \/* Egy kis anim\u00e1ci\u00f3 az elhelyez\u00e9shez *\/\n    }\n\n    .building-block.square {\n      background-color: #e74c3c; \/* Piros *\/\n      border-radius: 4px;\n    }\n\n    .building-block.circle {\n      background-color: #3498db; \/* K\u00e9k *\/\n      border-radius: 50%;\n    }\n\n    .building-block.triangle {\n      width: 0;\n      height: 0;\n      border-left: 40px solid transparent;\n      border-right: 40px solid transparent;\n      border-bottom: 80px solid #f1c40f; \/* S\u00e1rga *\/\n      background-color: transparent; \/* Fontos! *\/\n      position: absolute; \/* Reset position for triangle shape *\/\n    }\n\n    \/* Az ajt\u00f3 \u00e9s ablak, hogy illeszkedjenek a kock\u00e1khoz *\/\n    .building-block.door {\n        width: 40px;\n        height: 60px;\n        background-color: #8b4513; \/* Barna *\/\n        border-radius: 0;\n        border: none;\n    }\n\n    .building-block.window {\n        width: 40px;\n        height: 40px;\n        background-color: #add8e6; \/* Vil\u00e1gosk\u00e9k *\/\n        border-radius: 4px;\n        border: 2px solid #333;\n    }\n\n    \/* Gombok a sz\u00ednekkel *\/\n    #square-tool { background-color: #e74c3c; }\n    #circle-tool { background-color: #3498db; }\n    #triangle-tool { background-color: #f1c40f; }\n    #door-tool { background-color: #8b4513; color: #fff; }\n    #window-tool { background-color: #add8e6; color: #333; }\n\n  <\/style>\n<\/head>\n<body>\n\n  <div id=\"playground\">\n    <!-- Ide ker\u00fclnek majd az \u00e9p\u00edt\u0151elemek -->\n  <\/div>\n\n  <div id=\"toolbar\">\n    <div class=\"tool-item\" id=\"square-tool\" data-shape=\"square\">Kocka<\/div>\n    <div class=\"tool-item\" id=\"circle-tool\" data-shape=\"circle\">K\u00f6r<\/div>\n    <div class=\"tool-item\" id=\"triangle-tool\" data-shape=\"triangle\">H\u00e1romsz\u00f6g<\/div>\n    <div class=\"tool-item\" id=\"door-tool\" data-shape=\"door\">Ajt\u00f3<\/div>\n    <div class=\"tool-item\" id=\"window-tool\" data-shape=\"window\">Ablak<\/div>\n  <\/div>\n\n  <script>\n    const playground = document.getElementById('playground');\n    const toolbar = document.getElementById('toolbar');\n    let selectedShape = null; \/\/ T\u00e1rolja a kiv\u00e1lasztott forma t\u00edpus\u00e1t\n\n    \/\/ Eszk\u00f6zt\u00e1r elemek kiv\u00e1laszt\u00e1sa\n    toolbar.addEventListener('click', (event) => {\n      const clickedTool = event.target.closest('.tool-item'); \/\/ Megkeresi a legk\u00f6zelebbi tool-item-et\n      if (clickedTool) {\n        \/\/ T\u00f6rli az \u00f6sszes \"selected\" oszt\u00e1lyt\n        document.querySelectorAll('.tool-item').forEach(item => {\n          item.classList.remove('selected');\n        });\n\n        \/\/ Hozz\u00e1adja a \"selected\" oszt\u00e1lyt a kattintott elemhez\n        clickedTool.classList.add('selected');\n        selectedShape = clickedTool.dataset.shape; \/\/ Elmenti a kiv\u00e1lasztott forma t\u00edpus\u00e1t a data-shape attrib\u00fatumb\u00f3l\n        console.log(`Kiv\u00e1lasztott elem: ${selectedShape}`);\n      }\n    });\n\n    \/\/ \u00c9p\u00edt\u0151elem elhelyez\u00e9se a j\u00e1tsz\u00f3t\u00e9ren\n    playground.addEventListener('click', (event) => {\n      if (selectedShape) { \/\/ Csak akkor helyez el, ha van kiv\u00e1lasztott elem\n        const newBlock = document.createElement('div');\n        newBlock.classList.add('building-block', selectedShape); \/\/ Hozz\u00e1adja az alap \u00e9s a specifikus oszt\u00e1lyt\n\n        \/\/ Poz\u00edci\u00f3 be\u00e1ll\u00edt\u00e1sa: kattint\u00e1s helye\n        \/\/ Fontos: Az offsetLeft\/Top a sz\u00fcl\u0151h\u00f6z k\u00e9pest adja vissza a poz\u00edci\u00f3t\n        \/\/ event.clientX\/Y az ablakhoz k\u00e9pest. Kivonjuk a playground poz\u00edci\u00f3j\u00e1t.\n        const playgroundRect = playground.getBoundingClientRect();\n        const x = event.clientX - playgroundRect.left - (newBlock.offsetWidth \/ 2); \/\/ K\u00f6z\u00e9pre igaz\u00edt\u00e1s X tengelyen\n        const y = event.clientY - playgroundRect.top - (newBlock.offsetHeight \/ 2); \/\/ K\u00f6z\u00e9pre igaz\u00edt\u00e1s Y tengelyen\n\n        newBlock.style.left = `${x}px`;\n        newBlock.style.top = `${y}px`;\n\n        playground.appendChild(newBlock);\n      } else {\n        console.log('Nincs kiv\u00e1lasztott \u00e9p\u00edt\u0151elem!');\n      }\n    });\n\n    \/\/ Kezdetben legyen kiv\u00e1lasztva az els\u0151 elem\n    document.addEventListener('DOMContentLoaded', () => {\n        document.getElementById('square-tool').click();\n    });\n\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Egyszer\u0171 \u00c9p\u00edt\u0151j\u00e1t\u00e9k Dem\u00f3 Kocka K\u00f6r H\u00e1romsz\u00f6g Ajt\u00f3 Ablak<\/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-610","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/610","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=610"}],"version-history":[{"count":2,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/610\/revisions"}],"predecessor-version":[{"id":619,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/610\/revisions\/619"}],"wp:attachment":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/media?parent=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}