{"id":13,"date":"2025-12-06T09:11:51","date_gmt":"2025-12-06T09:11:51","guid":{"rendered":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/?page_id=13"},"modified":"2025-12-06T14:30:21","modified_gmt":"2025-12-06T14:30:21","slug":"testing-page","status":"publish","type":"page","link":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/testing-page\/","title":{"rendered":"Testing Page"},"content":{"rendered":"<div id=\"cs-content\" class=\"cs-content\"><div class=\"x-section e13-e1 md-0\"><div class=\"x-row x-container max width e13-e2 md-1 md-2 md-3\"><div class=\"x-row-inner\"><div class=\"x-col e13-e3 md-5\"><div class=\"x-div e13-e4-v0 md-6 before-after-container\"><div class=\"cs-before-after-container\">\n  <div class=\"before-image\">\n    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/picsum\/800\/600?grayscale\" alt=\"Before Image\">\n  <\/div>\n  <div class=\"after-image\">\n    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/picsum\/800\/600\" alt=\"After Image\">\n  <\/div>\n  <div class=\"slider-handle\" title=\"Double-click to reset\">\n    <div class=\"handle-arrow\">\n      <div class=\"arrow left\"><\/div>\n      <div class=\"arrow right\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Initialize all sliders on the page\n  initBeforeAfterSliders();\n  \n  function initBeforeAfterSliders() {\n    const containers = document.querySelectorAll('.cs-before-after-container');\n    \n    containers.forEach(container => {\n      const beforeDiv = container.querySelector('.before-image');\n      const handle = container.querySelector('.slider-handle');\n      let isDragging = false;\n      let currentContainer = null;\n      \n      \/\/ Set initial position\n      setPosition(container, 50);\n      \n      \/\/ Mouse events\n      handle.addEventListener('mousedown', function(e) {\n        startDrag(e, container);\n      });\n      \n      handle.addEventListener('touchstart', function(e) {\n        startDrag(e, container);\n      }, { passive: true });\n      \n      handle.addEventListener('dblclick', function() {\n        resetPosition(container);\n      });\n    });\n    \n    \/\/ Global handlers to ensure proper behavior\n    document.addEventListener('mouseup', stopDrag);\n    document.addEventListener('touchend', stopDrag);\n    \n    let activeContainer = null;\n    \n    function startDrag(e, container) {\n      activeContainer = container;\n      container.classList.add('dragging');\n      updatePosition(e);\n      \n      document.addEventListener('mousemove', updatePosition);\n      document.addEventListener('touchmove', updatePosition, { passive: true });\n    }\n    \n    function updatePosition(e) {\n      if (!activeContainer) return;\n      \n      let pageX;\n      if (e.type.includes('mouse')) {\n        pageX = e.pageX;\n      } else {\n        pageX = e.touches[0].pageX;\n      }\n      \n      const containerRect = activeContainer.getBoundingClientRect();\n      const containerLeft = containerRect.left + window.scrollX;\n      const containerWidth = containerRect.width;\n      \n      let position = ((pageX - containerLeft) \/ containerWidth) * 100;\n      position = Math.max(0, Math.min(100, position));\n      \n      setPosition(activeContainer, position);\n    }\n    \n    function stopDrag() {\n      if (activeContainer) {\n        activeContainer.classList.remove('dragging');\n        activeContainer = null;\n      }\n      \n      document.removeEventListener('mousemove', updatePosition);\n      document.removeEventListener('touchmove', updatePosition);\n    }\n    \n    function setPosition(container, position) {\n      const beforeDiv = container.querySelector('.before-image');\n      const handle = container.querySelector('.slider-handle');\n      \n      beforeDiv.style.width = `${position}%`;\n      handle.style.left = `${position}%`;\n    }\n    \n    function resetPosition(container) {\n      setPosition(container, 50);\n    }\n  }\n});\n<\/script><\/div><\/div><\/div><\/div><div class=\"x-row x-container max width e13-e5 md-1 md-2 md-4\"><div class=\"x-row-inner\"><div class=\"x-col e13-e6 md-5\"><div class=\"x-div e13-e7-v0 md-6 before-after-container\"><div class=\"cs-before-after-container\">\n  <div class=\"before-image\">\n    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/picsum\/800\/600?grayscale\" alt=\"Before Image\">\n  <\/div>\n  <div class=\"after-image\">\n    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/picsum\/800\/600\" alt=\"After Image\">\n  <\/div>\n  <div class=\"slider-handle\" title=\"Double-click to reset\">\n    <div class=\"handle-arrow\">\n      <div class=\"arrow left\"><\/div>\n      <div class=\"arrow right\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Initialize all sliders on the page\n  initBeforeAfterSliders();\n  \n  function initBeforeAfterSliders() {\n    const containers = document.querySelectorAll('.cs-before-after-container');\n    \n    containers.forEach(container => {\n      const beforeDiv = container.querySelector('.before-image');\n      const handle = container.querySelector('.slider-handle');\n      let isDragging = false;\n      let currentContainer = null;\n      \n      \/\/ Set initial position\n      setPosition(container, 50);\n      \n      \/\/ Mouse events\n      handle.addEventListener('mousedown', function(e) {\n        startDrag(e, container);\n      });\n      \n      handle.addEventListener('touchstart', function(e) {\n        startDrag(e, container);\n      }, { passive: true });\n      \n      handle.addEventListener('dblclick', function() {\n        resetPosition(container);\n      });\n    });\n    \n    \/\/ Global handlers to ensure proper behavior\n    document.addEventListener('mouseup', stopDrag);\n    document.addEventListener('touchend', stopDrag);\n    \n    let activeContainer = null;\n    \n    function startDrag(e, container) {\n      activeContainer = container;\n      container.classList.add('dragging');\n      updatePosition(e);\n      \n      document.addEventListener('mousemove', updatePosition);\n      document.addEventListener('touchmove', updatePosition, { passive: true });\n    }\n    \n    function updatePosition(e) {\n      if (!activeContainer) return;\n      \n      let pageX;\n      if (e.type.includes('mouse')) {\n        pageX = e.pageX;\n      } else {\n        pageX = e.touches[0].pageX;\n      }\n      \n      const containerRect = activeContainer.getBoundingClientRect();\n      const containerLeft = containerRect.left + window.scrollX;\n      const containerWidth = containerRect.width;\n      \n      let position = ((pageX - containerLeft) \/ containerWidth) * 100;\n      position = Math.max(0, Math.min(100, position));\n      \n      setPosition(activeContainer, position);\n    }\n    \n    function stopDrag() {\n      if (activeContainer) {\n        activeContainer.classList.remove('dragging');\n        activeContainer = null;\n      }\n      \n      document.removeEventListener('mousemove', updatePosition);\n      document.removeEventListener('touchmove', updatePosition);\n    }\n    \n    function setPosition(container, position) {\n      const beforeDiv = container.querySelector('.before-image');\n      const handle = container.querySelector('.slider-handle');\n      \n      beforeDiv.style.width = `${position}%`;\n      handle.style.left = `${position}%`;\n    }\n    \n    function resetPosition(container) {\n      setPosition(container, 50);\n    }\n  }\n});\n<\/script><\/div><\/div><div class=\"x-col e13-e8 md-5\"><div class=\"x-div e13-e9-v0 md-6 before-after-container\"><div class=\"cs-before-after-container\">\n  <div class=\"before-image\">\n    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/picsum\/800\/600?grayscale\" alt=\"Before Image\">\n  <\/div>\n  <div class=\"after-image\">\n    <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/picsum\/800\/600\" alt=\"After Image\">\n  <\/div>\n  <div class=\"slider-handle\" title=\"Double-click to reset\">\n    <div class=\"handle-arrow\">\n      <div class=\"arrow left\"><\/div>\n      <div class=\"arrow right\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Initialize all sliders on the page\n  initBeforeAfterSliders();\n  \n  function initBeforeAfterSliders() {\n    const containers = document.querySelectorAll('.cs-before-after-container');\n    \n    containers.forEach(container => {\n      const beforeDiv = container.querySelector('.before-image');\n      const handle = container.querySelector('.slider-handle');\n      let isDragging = false;\n      let currentContainer = null;\n      \n      \/\/ Set initial position\n      setPosition(container, 50);\n      \n      \/\/ Mouse events\n      handle.addEventListener('mousedown', function(e) {\n        startDrag(e, container);\n      });\n      \n      handle.addEventListener('touchstart', function(e) {\n        startDrag(e, container);\n      }, { passive: true });\n      \n      handle.addEventListener('dblclick', function() {\n        resetPosition(container);\n      });\n    });\n    \n    \/\/ Global handlers to ensure proper behavior\n    document.addEventListener('mouseup', stopDrag);\n    document.addEventListener('touchend', stopDrag);\n    \n    let activeContainer = null;\n    \n    function startDrag(e, container) {\n      activeContainer = container;\n      container.classList.add('dragging');\n      updatePosition(e);\n      \n      document.addEventListener('mousemove', updatePosition);\n      document.addEventListener('touchmove', updatePosition, { passive: true });\n    }\n    \n    function updatePosition(e) {\n      if (!activeContainer) return;\n      \n      let pageX;\n      if (e.type.includes('mouse')) {\n        pageX = e.pageX;\n      } else {\n        pageX = e.touches[0].pageX;\n      }\n      \n      const containerRect = activeContainer.getBoundingClientRect();\n      const containerLeft = containerRect.left + window.scrollX;\n      const containerWidth = containerRect.width;\n      \n      let position = ((pageX - containerLeft) \/ containerWidth) * 100;\n      position = Math.max(0, Math.min(100, position));\n      \n      setPosition(activeContainer, position);\n    }\n    \n    function stopDrag() {\n      if (activeContainer) {\n        activeContainer.classList.remove('dragging');\n        activeContainer = null;\n      }\n      \n      document.removeEventListener('mousemove', updatePosition);\n      document.removeEventListener('touchmove', updatePosition);\n    }\n    \n    function setPosition(container, position) {\n      const beforeDiv = container.querySelector('.before-image');\n      const handle = container.querySelector('.slider-handle');\n      \n      beforeDiv.style.width = `${position}%`;\n      handle.style.left = `${position}%`;\n    }\n    \n    function resetPosition(container) {\n      setPosition(container, 50);\n    }\n  }\n});\n<\/script><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-4.php","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry","no-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":16,"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/practical-kirch.103-6-196-142.plesk.page\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}