{"id":2,"date":"2025-02-05T18:37:36","date_gmt":"2025-02-05T18:37:36","guid":{"rendered":"https:\/\/etsy.elementar.dev\/?page_id=2"},"modified":"2025-02-05T20:15:51","modified_gmt":"2025-02-05T20:15:51","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/etsy.elementar.dev\/","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-add80cb e-flex e-con-boxed e-con e-parent\" data-id=\"add80cb\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ca3cd9 elementor-widget elementor-widget-shortcode\" data-id=\"8ca3cd9\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div style=\"margin-bottom: 1em;\">\n      <input\n        type=\"text\"\n        id=\"websiteURL\"\n        placeholder=\"Enter a website URL (e.g. https:\/\/example.com)\"\n        style=\"width: 300px; padding: 5px;\"\n      >\n      <button id=\"showWebsiteBtn\" style=\"padding: 5px 10px;\">Show Website<\/button>\n    <\/div>\n\n    <script>\n      (function() {\n        var showBtn = document.getElementById('showWebsiteBtn');\n        var urlInput = document.getElementById('websiteURL');\n\n        showBtn.addEventListener('click', function() {\n          var url = urlInput.value.trim();\n          \/\/ Basic validation\n          if (url && (url.startsWith('http:\/\/') || url.startsWith('https:\/\/'))) {\n            \/\/ Create and dispatch a custom event to communicate the URL to the iframe\n            var event = new CustomEvent('updateIframeUrl', { detail: { url: url } });\n            window.dispatchEvent(event);\n          } else {\n            alert('Please enter a valid URL, including http:\/\/ or https:\/\/');\n          }\n        });\n      })();\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ec17e89 e-con-full e-flex e-con e-child\" data-id=\"ec17e89\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-625698d e-con-full mobile e-flex e-con e-child\" data-id=\"625698d\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-053e184 e-con-full e-flex e-con e-child\" data-id=\"053e184\" data-element_type=\"container\" id=\"captureContainer\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e638fe9 elementor-widget elementor-widget-image\" data-id=\"e638fe9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/etsy.elementar.dev\/wp-content\/uploads\/2025\/02\/smartphone_mockup_4_thumbnail_1707329118793.webp\" class=\"attachment-full size-full wp-image-29\" alt=\"\" srcset=\"https:\/\/etsy.elementar.dev\/wp-content\/uploads\/2025\/02\/smartphone_mockup_4_thumbnail_1707329118793.webp 500w, https:\/\/etsy.elementar.dev\/wp-content\/uploads\/2025\/02\/smartphone_mockup_4_thumbnail_1707329118793-300x300.webp 300w, https:\/\/etsy.elementar.dev\/wp-content\/uploads\/2025\/02\/smartphone_mockup_4_thumbnail_1707329118793-150x150.webp 150w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ff9120 e-con-full mobile e-flex e-con e-child\" data-id=\"1ff9120\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be991b7 elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"be991b7\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div style=\"border: 0px solid #ccc; padding: 0px; overflow: hidden; width: 100%; height: 800px;\">\n      <iframe\n        id=\"websiteFrame\"\n        src=\"\"\n        width=\"100%\"\n        height=\"800\"\n        frameborder=\"0\"\n\t\tscrolling=\"no\"\n        style=\"border: none; overflow: hidden;\"\n      ><\/iframe>\n    <\/div>\n<style>\n\tiframe {\n\t\tbody {\n\t\t\t    overflow: hidden;\n\t\t}\n\t}\n<\/style>\n    <script>\n      (function() {\n        var iframe = document.getElementById('websiteFrame');\n        \/\/ Listen for the custom event dispatched by the search shortcode\n        window.addEventListener('updateIframeUrl', function(e) {\n          var url = e.detail.url;\n          iframe.src = url;\n        });\n      })();\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-efde558 mobile elementor-widget elementor-widget-html\" data-id=\"efde558\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    .mobile {\n        scale: 0.42;\n            -webkit-transform-origin-y: top;\n    }\n<\/style>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46c37b3 elementor-widget elementor-widget-html\" data-id=\"46c37b3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Generate JPG from Container<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<\/head>\n<body>\n\n\n    <button onclick=\"captureAndDownload()\">Download as JPG<\/button>\n\n    <script>\n        function captureAndDownload() {\n            const container = document.getElementById(\"captureContainer\");\n\n            html2canvas(container, {\n                scale: 4, \/\/ Higher scale for better quality (4x original)\n                useCORS: true \/\/ Enables cross-origin images\n            }).then(canvas => {\n                \/\/ Create a scaled canvas for 2000px width\n                const targetWidth = 2000;\n                const scaleFactor = targetWidth \/ canvas.width;\n                const targetHeight = canvas.height * scaleFactor;\n\n                \/\/ Create an offscreen canvas to resize\n                const offscreenCanvas = document.createElement(\"canvas\");\n                offscreenCanvas.width = targetWidth;\n                offscreenCanvas.height = targetHeight;\n                const ctx = offscreenCanvas.getContext(\"2d\");\n\n                \/\/ Draw the original canvas to the resized one\n                ctx.drawImage(canvas, 0, 0, targetWidth, targetHeight);\n\n                \/\/ Convert canvas to JPG\n                const image = offscreenCanvas.toDataURL(\"image\/jpeg\", 0.95); \/\/ 0.95 = high quality\n\n                \/\/ Create download link\n                const link = document.createElement(\"a\");\n                link.href = image;\n                link.download = \"captured-image.jpg\";\n                document.body.appendChild(link);\n                link.click();\n                document.body.removeChild(link);\n            });\n        }\n    <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4eda3ec elementor-widget elementor-widget-shortcode\" data-id=\"4eda3ec\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div style=\"border: 0px solid #ccc; padding: 0px; overflow: hidden; width: 100%; height: 800px;\">\n      <iframe\n        id=\"websiteFrame\"\n        src=\"\"\n        width=\"100%\"\n        height=\"800\"\n        frameborder=\"0\"\n\t\tscrolling=\"no\"\n        style=\"border: none; overflow: hidden;\"\n      ><\/iframe>\n    <\/div>\n<style>\n\tiframe {\n\t\tbody {\n\t\t\t    overflow: hidden;\n\t\t}\n\t}\n<\/style>\n    <script>\n      (function() {\n        var iframe = document.getElementById('websiteFrame');\n        \/\/ Listen for the custom event dispatched by the search shortcode\n        window.addEventListener('updateIframeUrl', function(e) {\n          var url = e.detail.url;\n          iframe.src = url;\n        });\n      })();\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-81da160 e-flex e-con-boxed e-con e-parent\" data-id=\"81da160\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-520262a elementor-widget elementor-widget-html\" data-id=\"520262a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe\r\n  src=\"https:\/\/example.com\"\r\n  width=\"600\"\r\n  height=\"400\"\r\n  frameborder=\"0\"\r\n  style=\"border: none;\"\r\n  allowfullscreen\r\n>\r\n<\/iframe>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-58208a1 e-flex e-con-boxed e-con e-parent\" data-id=\"58208a1\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0674818 elementor-widget elementor-widget-html\" data-id=\"0674818\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Website Screenshot Capture<\/title>\r\n    <style>\r\n        body { font-family: Arial, sans-serif; text-align: center; }\r\n        input { width: 300px; padding: 10px; margin: 10px; }\r\n        button { padding: 10px 20px; cursor: pointer; margin-top: 10px; }\r\n        .container { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }\r\n        .screenshot { width: 400px; border: 1px solid #ccc; padding: 10px; text-align: center; }\r\n        img { max-width: 100%; height: auto; display: block; margin: 0 auto; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <h2>Enter a Website URL to Capture Screenshots<\/h2>\r\n    <input type=\"text\" id=\"websiteURL\" placeholder=\"Enter website (https:\/\/example.com)\">\r\n    <button onclick=\"captureScreenshots()\">Capture Screenshots<\/button>\r\n\r\n    <div class=\"container\">\r\n        <div class=\"screenshot\">\r\n            <h3>Desktop Version<\/h3>\r\n            <img decoding=\"async\" id=\"desktopScreenshot\" src=\"\" alt=\"Desktop Screenshot\">\r\n            <br>\r\n            <button id=\"downloadDesktop\" style=\"display:none;\" onclick=\"downloadImage('desktop')\">Download Desktop<\/button>\r\n        <\/div>\r\n        <div class=\"screenshot\">\r\n            <h3>Mobile Version<\/h3>\r\n            <img decoding=\"async\" id=\"mobileScreenshot\" src=\"\" alt=\"Mobile Screenshot\">\r\n            <br>\r\n            <button id=\"downloadMobile\" style=\"display:none;\" onclick=\"downloadImage('mobile')\">Download Mobile<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        function captureScreenshots() {\r\n    const websiteURL = document.getElementById(\"websiteURL\").value.trim();\r\n\r\n    \/\/ Enhanced URL validation\r\n    const urlPattern = \/^(https?:\\\/\\\/)?([\\w-]+\\.)+[\\w-]+(\\\/[\\w- .\/?%&=]*)?$\/i;\r\n    \r\n    if (!websiteURL || !urlPattern.test(websiteURL)) {\r\n        alert(\"Please enter a valid website URL starting with http:\/\/ or https:\/\/\");\r\n        return;\r\n    }\r\n\r\n    \/\/ Ensure URL starts with http:\/\/ or https:\/\/\r\n    let formattedURL = websiteURL;\r\n    if (!\/^https?:\\\/\\\/\/i.test(websiteURL)) {\r\n        formattedURL = \"https:\/\/\" + websiteURL; \/\/ Default to HTTPS\r\n    }\r\n\r\n    \/\/ API call to backend for screenshot processing\r\n    const backendAPI = \"YOUR_BACKEND_ENDPOINT\"; \/\/ Replace with your server endpoint\r\n\r\n    fetch(`${backendAPI}?url=${encodeURIComponent(formattedURL)}&type=desktop`)\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            document.getElementById(\"desktopScreenshot\").src = data.screenshotUrl;\r\n            document.getElementById(\"downloadDesktop\").style.display = \"inline-block\";\r\n        });\r\n\r\n    fetch(`${backendAPI}?url=${encodeURIComponent(formattedURL)}&type=mobile`)\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            document.getElementById(\"mobileScreenshot\").src = data.screenshotUrl;\r\n            document.getElementById(\"downloadMobile\").style.display = \"inline-block\";\r\n        });\r\n}\r\n\r\n\r\n        function downloadImage(type) {\r\n            const image = document.getElementById(type === \"desktop\" ? \"desktopScreenshot\" : \"mobileScreenshot\").src;\r\n            const link = document.createElement(\"a\");\r\n            link.href = image;\r\n            link.download = `${type}-screenshot.jpg`;\r\n            document.body.appendChild(link);\r\n            link.click();\r\n            document.body.removeChild(link);\r\n        }\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Generate JPG from Container Download as JPG Website Screenshot Capture Enter a Website URL to Capture Screenshots Capture Screenshots Desktop Version Download Desktop Mobile Version Download Mobile<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":165,"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/etsy.elementar.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}