{"id":145,"date":"2026-07-19T20:47:49","date_gmt":"2026-07-19T18:47:49","guid":{"rendered":"https:\/\/www.davidtoth.eu\/index.php\/fooldal\/"},"modified":"2026-07-26T18:55:27","modified_gmt":"2026-07-26T16:55:27","slug":"fooldal","status":"publish","type":"page","link":"https:\/\/www.davidtoth.eu\/","title":{"rendered":"F\u0151oldal"},"content":{"rendered":"\n<div class=\"curved-loop-container\" data-curved-loop=\"\" data-speed=\"85\" data-direction=\"left\">\n  <!--\n  =====================================================\n  CSAK AZ AL\u00c1BBI SABLONSZ\u00d6VEGET CSER\u00c9LD KI A SAJ\u00c1TODRA\n  =====================================================\n  -->\n  <span class=\"curved-loop-source\">\n    Welcome to my site!!\n  <\/span>\n\n  <svg class=\"curved-loop-svg\" role=\"img\" aria-label=\"Folyamatosan mozg\u00f3 \u00edvelt sz\u00f6veg\">\n    <path class=\"curved-loop-path\"><\/path>\n\n    <text class=\"curved-loop-text\">\n      <textPath class=\"curved-loop-text-path\"><\/textPath>\n    <\/text>\n\n    <text class=\"curved-loop-measure\" aria-hidden=\"true\"><\/text>\n  <\/svg>\n<\/div>\n\n<style>\n\/* A teljes anim\u00e1ci\u00f3s ter\u00fclet *\/\n.curved-loop-container {\n  width: 100vw;\n  max-width: 100vw !important;\n\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n\n  height: clamp(220px, 25vw, 420px);\n\n  position: relative;\n  overflow: hidden;\n\n  box-sizing: border-box;\n  background: #000000;\n\n  cursor: grab;\n  user-select: none;\n  touch-action: pan-y;\n}\n\n.curved-loop-container:active {\n  cursor: grabbing;\n}\n\n\/* A szerkeszthet\u0151 eredeti sz\u00f6veg elrejt\u00e9se *\/\n.curved-loop-source {\n  display: none !important;\n}\n\n\/* Teljes m\u00e9ret\u0171 SVG *\/\n.curved-loop-svg {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: visible;\n}\n\n\/* Az \u00fatvonal nem l\u00e1that\u00f3 *\/\n.curved-loop-path {\n  fill: none;\n  stroke: none;\n}\n\n\/* A mozg\u00f3 sz\u00f6veg form\u00e1z\u00e1sa *\/\n.curved-loop-text,\n.curved-loop-measure {\n  fill: #ffffff;\n\n  font-family: inherit;\n  font-size: clamp(38px, 4.8vw, 88px);\n  font-weight: 800;\n\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n\n  dominant-baseline: middle;\n  font-variant-ligatures: none;\n}\n\n\/* Csak a sz\u00f6veg sz\u00e9less\u00e9g\u00e9nek m\u00e9r\u00e9s\u00e9re szolg\u00e1l *\/\n.curved-loop-measure {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n@media (max-width: 700px) {\n  .curved-loop-container {\n    height: 230px;\n  }\n\n  .curved-loop-text,\n  .curved-loop-measure {\n    font-size: clamp(30px, 9vw, 50px);\n    letter-spacing: 0.025em;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .curved-loop-container {\n    cursor: default;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n\n  function initializeCurvedLoops() {\n    const containers = document.querySelectorAll(\n      \"[data-curved-loop]:not([data-curved-loop-ready])\"\n    );\n\n    containers.forEach(function (container, containerIndex) {\n      container.setAttribute(\n        \"data-curved-loop-ready\",\n        \"true\"\n      );\n\n      const svg = container.querySelector(\n        \".curved-loop-svg\"\n      );\n\n      const path = container.querySelector(\n        \".curved-loop-path\"\n      );\n\n      const textPath = container.querySelector(\n        \".curved-loop-text-path\"\n      );\n\n      const source = container.querySelector(\n        \".curved-loop-source\"\n      );\n\n      const measure = container.querySelector(\n        \".curved-loop-measure\"\n      );\n\n      if (\n        !svg ||\n        !path ||\n        !textPath ||\n        !source ||\n        !measure\n      ) {\n        return;\n      }\n\n      const originalText = source.textContent\n        .replace(\/\\s+\/g, \" \")\n        .trim();\n\n      if (!originalText) {\n        return;\n      }\n\n      \/*\n       * A sz\u00f6vegr\u00e9szek k\u00f6z\u00f6tti elv\u00e1laszt\u00f3.\n       * A \u2726 karakter lecser\u00e9lhet\u0151 p\u00e9ld\u00e1ul erre: \u2022 vagy \u2014\n       *\/\n      const repeatedPart =\n        originalText + \"   \u2726   \";\n\n      \/*\n       * ANIM\u00c1CI\u00d3S BE\u00c1LL\u00cdT\u00c1SOK\n       *\/\n\n      let speed =\n        parseFloat(container.dataset.speed) || 85;\n\n      const direction =\n        container.dataset.direction === \"right\"\n          ? 1\n          : -1;\n\n      const reducedMotion = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      ).matches;\n\n      if (reducedMotion) {\n        speed = 0;\n      }\n\n      const uniquePathId =\n        \"curved-loop-path-\" +\n        Date.now() +\n        \"-\" +\n        containerIndex +\n        \"-\" +\n        Math.floor(Math.random() * 100000);\n\n      path.setAttribute(\"id\", uniquePathId);\n      textPath.setAttribute(\n        \"href\",\n        \"#\" + uniquePathId\n      );\n\n      textPath.setAttribute(\n        \"xlink:href\",\n        \"#\" + uniquePathId\n      );\n\n      measure.textContent = repeatedPart;\n\n      let segmentWidth = 300;\n      let phase = 0;\n      let lastFrameTime = performance.now();\n\n      let dragging = false;\n      let activePointerId = null;\n      let previousPointerX = 0;\n\n      function updateTextPosition() {\n        if (!segmentWidth) {\n          return;\n        }\n\n        \/*\n         * A f\u00e1zist mindig egy teljes sz\u00f6vegr\u00e9sz\n         * sz\u00e9less\u00e9g\u00e9n bel\u00fcl tartjuk.\n         *\/\n        phase =\n          ((phase % segmentWidth) + segmentWidth) %\n          segmentWidth;\n\n        \/*\n         * A negat\u00edv kezd\u0151poz\u00edci\u00f3 biztos\u00edtja,\n         * hogy a bal sz\u00e9len soha ne legyen \u00fcres r\u00e9sz.\n         *\/\n        const startOffset =\n          -segmentWidth * 2 + phase;\n\n        textPath.setAttribute(\n          \"startOffset\",\n          startOffset\n        );\n      }\n\n      function rebuildCurve() {\n        const width =\n          container.clientWidth ||\n          window.innerWidth;\n\n        const height =\n          container.clientHeight || 300;\n\n        svg.setAttribute(\n          \"viewBox\",\n          \"0 0 \" + width + \" \" + height\n        );\n\n        \/*\n         * Az \u00edvelt \u00fatvonal alakja.\n         *\n         * Az \u00fatvonal t\u00falny\u00falik a k\u00e9perny\u0151 k\u00e9t sz\u00e9l\u00e9n,\n         * ez\u00e9rt a sz\u00f6veg folyamatosan \u00e9rkezik \u00e9s t\u00e1vozik.\n         *\/\n        const pathData = [\n          \"M\",\n          -width * 0.25,\n          height * 0.63,\n\n          \"C\",\n          width * 0.08,\n          height * 0.05,\n\n          width * 0.28,\n          height * 0.96,\n\n          width * 0.5,\n          height * 0.5,\n\n          \"S\",\n          width * 0.88,\n          height * 0.04,\n\n          width * 1.25,\n          height * 0.61\n        ].join(\" \");\n\n        path.setAttribute(\"d\", pathData);\n\n        \/*\n         * Megm\u00e9rj\u00fck egy ism\u00e9tl\u0151d\u0151 sz\u00f6vegr\u00e9sz\n         * t\u00e9nyleges sz\u00e9less\u00e9g\u00e9t.\n         *\/\n        const measuredWidth =\n          measure.getComputedTextLength();\n\n        if (measuredWidth > 0) {\n          segmentWidth = measuredWidth;\n        }\n\n        const pathLength = path.getTotalLength();\n\n        const repetitionCount = Math.max(\n          10,\n          Math.ceil(pathLength \/ segmentWidth) + 8\n        );\n\n        textPath.textContent =\n          repeatedPart.repeat(repetitionCount);\n\n        updateTextPosition();\n      }\n\n      function animationFrame(currentTime) {\n        const elapsedSeconds = Math.min(\n          (currentTime - lastFrameTime) \/ 1000,\n          0.05\n        );\n\n        lastFrameTime = currentTime;\n\n        if (!dragging && speed !== 0) {\n          phase +=\n            direction * speed * elapsedSeconds;\n\n          updateTextPosition();\n        }\n\n        window.requestAnimationFrame(\n          animationFrame\n        );\n      }\n\n      \/*\n       * EG\u00c9RREL \u00c9S \u00c9RINT\u00c9SSEL H\u00daZHAT\u00d3\n       *\/\n\n      container.addEventListener(\n        \"pointerdown\",\n        function (event) {\n          dragging = true;\n          activePointerId = event.pointerId;\n          previousPointerX = event.clientX;\n\n          container.setPointerCapture(\n            event.pointerId\n          );\n        }\n      );\n\n      container.addEventListener(\n        \"pointermove\",\n        function (event) {\n          if (\n            !dragging ||\n            event.pointerId !== activePointerId\n          ) {\n            return;\n          }\n\n          const movement =\n            event.clientX - previousPointerX;\n\n          previousPointerX = event.clientX;\n\n          phase += movement;\n\n          updateTextPosition();\n        }\n      );\n\n      function stopDragging(event) {\n        if (\n          event.pointerId !== activePointerId\n        ) {\n          return;\n        }\n\n        dragging = false;\n        activePointerId = null;\n      }\n\n      container.addEventListener(\n        \"pointerup\",\n        stopDragging\n      );\n\n      container.addEventListener(\n        \"pointercancel\",\n        stopDragging\n      );\n\n      \/*\n       * M\u00e9retv\u00e1ltoz\u00e1s figyel\u00e9se\n       *\/\n\n      if (\"ResizeObserver\" in window) {\n        const resizeObserver =\n          new ResizeObserver(rebuildCurve);\n\n        resizeObserver.observe(container);\n      } else {\n        window.addEventListener(\n          \"resize\",\n          rebuildCurve\n        );\n      }\n\n      rebuildCurve();\n\n      \/*\n       * A webfont bet\u00f6lt\u00e9se ut\u00e1n \u00fajram\u00e9rj\u00fck\n       * a sz\u00f6veg t\u00e9nyleges sz\u00e9less\u00e9g\u00e9t.\n       *\/\n      if (\n        document.fonts &&\n        document.fonts.ready\n      ) {\n        document.fonts.ready.then(\n          rebuildCurve\n        );\n      }\n\n      window.requestAnimationFrame(\n        animationFrame\n      );\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initializeCurvedLoops\n    );\n  } else {\n    initializeCurvedLoops();\n  }\n})();\n<\/script>\n\n\n\n<div class=\"decrypted-text-container\" data-decrypted-text=\"\">\n\n  <!--\n  ==========================================================\n  CSAK AZ AL\u00c1BBI SZ\u00d6VEGET KELL KICSER\u00c9LNED A SAJ\u00c1T SZ\u00d6VEGEDRE\n  ==========================================================\n  -->\n  <span class=\"decrypted-text-source\">\n    Ez a honlap k\u00eds\u00e9rleti jelleggel lett l\u00e9trehozva, mint gyakorl\u00e1s, illetve a sz\u00e1momra hasznos honlapok egys\u00e9ges gy\u0171jt\u00e9s\u00e9re. A honlap kin\u00e9zete, tartalma emiatt b\u00e1rmikor v\u00e1ltozhat, ak\u00e1r j\u00f3, ak\u00e1r rossz ir\u00e1nyba.Ha ez b\u00e1rmilyen kellemetlens\u00e9get okoz sz\u00e1modra, eln\u00e9z\u00e9st \u00e9rte. Rem\u00e9lem  tal\u00e1lsz a linkjeim k\u00f6z\u00f6tt hasznosat vagy sz\u00f3rakoztat\u00f3t.\n  <\/span>\n\n  <span class=\"decrypted-text-output\" aria-live=\"polite\"><\/span>\n\n<\/div>\n\n<style>\n.decrypted-text-container {\n  width: 100vw;\n  max-width: 100vw !important;\n\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  margin-top: 0 !important;\n\n   \/* Nem foglal el egy teljes k\u00e9perny\u0151magass\u00e1got *\/ \n  min-height: auto;\n\n  box-sizing: border-box;\n\n  \/* A k\u00e9t anim\u00e1ci\u00f3 k\u00f6z\u00f6tti t\u00e1vols\u00e1got f\u0151leg ez szab\u00e1lyozza *\/\n  padding:\n    clamp(20px, 3vw, 45px)\n    clamp(25px, 6vw, 120px)\n    clamp(50px, 6vw, 90px);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n\n  background: #000000;\n  text-align: center;\n}\n\n.decrypted-text-source {\n  display: none !important;\n}\n\n.decrypted-text-output {\n  display: block;\n\n  width: 100%;\n  max-width: 1500px;\n\n  margin: 0 auto;\n  padding: 0;\n\n  color: #ffffff;\n  font-family: inherit;\n\n  font-size: clamp(28px, 3.2vw, 58px);\n  font-weight: 800;\n  line-height: 1.12;\n  letter-spacing: -0.025em;\n\n  white-space: normal;\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n\n  font-variant-ligatures: none;\n}\n\n.decrypted-text-output.is-scrambling {\n  opacity: 0.88;\n}\n\n.decrypted-text-output.is-complete {\n  opacity: 1;\n}\n\n@media (max-width: 900px) {\n  .decrypted-text-container {\n    padding: 45px 30px;\n  }\n\n  .decrypted-text-output {\n    max-width: 100%;\n    font-size: clamp(27px, 5.5vw, 45px);\n    line-height: 1.14;\n  }\n}\n\n@media (max-width: 600px) {\n  .decrypted-text-container {\n    min-height: auto;\n    padding: 45px 20px;\n  }\n\n  .decrypted-text-output {\n    font-size: clamp(25px, 8vw, 38px);\n    line-height: 1.16;\n    letter-spacing: -0.015em;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .decrypted-text-output {\n    opacity: 1;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n\n  function initializeDecryptedText() {\n    const containers = document.querySelectorAll(\n      \"[data-decrypted-text]:not([data-decrypted-initialized])\"\n    );\n\n    containers.forEach(function (container) {\n      container.setAttribute(\n        \"data-decrypted-initialized\",\n        \"true\"\n      );\n\n      const sourceElement = container.querySelector(\n        \".decrypted-text-source\"\n      );\n\n      const outputElement = container.querySelector(\n        \".decrypted-text-output\"\n      );\n\n      if (!sourceElement || !outputElement) {\n        return;\n      }\n\n      const originalText = sourceElement.textContent\n        .replace(\/\\s+\/g, \" \")\n        .trim();\n\n      if (!originalText) {\n        return;\n      }\n\n      outputElement.setAttribute(\n        \"aria-label\",\n        originalText\n      );\n\n      \/*\n      ======================================\n      ANIM\u00c1CI\u00d3S BE\u00c1LL\u00cdT\u00c1SOK\n      ======================================\n      *\/\n\n      const animationSpeed = 25;\n      \/\/ Kisebb \u00e9rt\u00e9k = gyorsabb anim\u00e1ci\u00f3.\n\n      const animationLength = 70;\n      \/\/ Nagyobb \u00e9rt\u00e9k = fokozatosabb dek\u00f3dol\u00e1s.\n\n      const startDelay = 250;\n      \/\/ Ennyi id\u0151vel az oldalbet\u00f6lt\u00e9s ut\u00e1n indul.\n\n      const completedPause = 5200;\n      \/\/ Ism\u00e9tl\u00e9s eset\u00e9n ennyi ideig marad olvashat\u00f3.\n\n      const repeatAnimation = true;\n      \/\/ false = oldalbet\u00f6lt\u00e9skor egyszer fut le.\n      \/\/ true = folyamatosan \u00fajraindul.\n\n      const randomCharacters =\n        \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\" +\n        \"abcdefghijklmnopqrstuvwxyz\" +\n        \"0123456789\" +\n        \"!@#$%&*+-=?\/\";\n\n      const characters = Array.from(originalText);\n      const animatedIndexes = [];\n\n      characters.forEach(function (character, index) {\n        if (shouldAnimateCharacter(character)) {\n          animatedIndexes.push(index);\n        }\n      });\n\n      const revealAmount = Math.max(\n        1,\n        Math.ceil(\n          animatedIndexes.length \/ animationLength\n        )\n      );\n\n      let revealedIndexes = new Set();\n      let revealedCount = 0;\n      let animationTimer = null;\n      let restartTimer = null;\n\n      function shouldAnimateCharacter(character) {\n        return \/[A-Za-z\u00c0-\u017e\u00c1\u00c9\u00cd\u00d3\u00d6\u0150\u00da\u00dc\u0170\u00e1\u00e9\u00ed\u00f3\u00f6\u0151\u00fa\u00fc\u01710-9]\/.test(\n          character\n        );\n      }\n\n      function getRandomCharacter() {\n        const randomIndex = Math.floor(\n          Math.random() * randomCharacters.length\n        );\n\n        return randomCharacters.charAt(randomIndex);\n      }\n\n      function createScrambledText() {\n        return characters\n          .map(function (character, index) {\n            if (!shouldAnimateCharacter(character)) {\n              return character;\n            }\n\n            if (revealedIndexes.has(index)) {\n              return character;\n            }\n\n            return getRandomCharacter();\n          })\n          .join(\"\");\n      }\n\n      function stopTimers() {\n        if (animationTimer) {\n          window.clearInterval(animationTimer);\n          animationTimer = null;\n        }\n\n        if (restartTimer) {\n          window.clearTimeout(restartTimer);\n          restartTimer = null;\n        }\n      }\n\n      function completeAnimation() {\n        stopTimers();\n\n        outputElement.textContent = originalText;\n\n        outputElement.classList.remove(\n          \"is-scrambling\"\n        );\n\n        outputElement.classList.add(\n          \"is-complete\"\n        );\n\n        if (!repeatAnimation) {\n          return;\n        }\n\n        restartTimer = window.setTimeout(\n          startAnimation,\n          completedPause\n        );\n      }\n\n      function animationFrame() {\n        const nextLimit = Math.min(\n          revealedCount + revealAmount,\n          animatedIndexes.length\n        );\n\n        for (\n          let index = revealedCount;\n          index < nextLimit;\n          index += 1\n        ) {\n          revealedIndexes.add(\n            animatedIndexes[index]\n          );\n        }\n\n        revealedCount = nextLimit;\n\n        outputElement.textContent =\n          createScrambledText();\n\n        if (\n          revealedCount >= animatedIndexes.length\n        ) {\n          completeAnimation();\n        }\n      }\n\n      function startAnimation() {\n        stopTimers();\n\n        revealedIndexes = new Set();\n        revealedCount = 0;\n\n        outputElement.classList.remove(\n          \"is-complete\"\n        );\n\n        outputElement.classList.add(\n          \"is-scrambling\"\n        );\n\n        outputElement.textContent =\n          createScrambledText();\n\n        animationTimer = window.setInterval(\n          animationFrame,\n          animationSpeed\n        );\n      }\n\n      const reducedMotion = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      );\n\n      if (reducedMotion.matches) {\n        outputElement.textContent = originalText;\n\n        outputElement.classList.add(\n          \"is-complete\"\n        );\n\n        return;\n      }\n\n      window.setTimeout(\n        startAnimation,\n        startDelay\n      );\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initializeDecryptedText\n    );\n  } else {\n    initializeDecryptedText();\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to my site!! Ez a honlap k\u00eds\u00e9rleti jelleggel lett l\u00e9trehozva, mint gyakorl\u00e1s, illetve a sz\u00e1momra hasznos honlapok egys\u00e9ges gy\u0171jt\u00e9s\u00e9re. A honlap kin\u00e9zete, tartalma emiatt b\u00e1rmikor v\u00e1ltozhat, ak\u00e1r j\u00f3, ak\u00e1r rossz ir\u00e1nyba.Ha ez b\u00e1rmilyen kellemetlens\u00e9get okoz sz\u00e1modra, eln\u00e9z\u00e9st \u00e9rte. Rem\u00e9lem tal\u00e1lsz a linkjeim k\u00f6z\u00f6tt hasznosat vagy sz\u00f3rakoztat\u00f3t.<\/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-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/pages\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":16,"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":232,"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions\/232"}],"wp:attachment":[{"href":"https:\/\/www.davidtoth.eu\/index.php\/wp-json\/wp\/v2\/media?parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}