{"id":3252,"date":"2025-09-28T07:53:41","date_gmt":"2025-09-28T07:53:41","guid":{"rendered":"https:\/\/stellarkiwii.com\/?page_id=3252"},"modified":"2025-11-20T08:49:23","modified_gmt":"2025-11-20T08:49:23","slug":"sample1","status":"publish","type":"page","link":"https:\/\/stellarkiwii.com\/index.php\/sample1\/","title":{"rendered":"sample1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3252\" class=\"elementor elementor-3252\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"aux-parallax-section elementor-element elementor-element-2762b77 e-con-full e-flex e-con e-parent\" data-id=\"2762b77\" data-element_type=\"container\" data-e-type=\"container\" id=\"main-container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-3ba2ceb e-con-full heading e-flex e-con e-child\" data-id=\"3ba2ceb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b37df53 elementor-widget elementor-widget-heading\" data-id=\"b37df53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">MOVE  YOUR MOUSE BUTTON<\/h2>\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-36cb453 elementor-widget elementor-widget-html\" data-id=\"36cb453\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n\r\n<style>\r\n\r\n#main-container{\r\n    position: relative;\r\n}\r\n\r\n\r\n.heading h1 {\r\n    color: #fff;\r\n    font-size: clamp(1.7rem, 4.2vw, 6rem);\r\n    font-weight: 400;\r\n    text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff;\r\n    text-align: center;\r\n}\r\n\r\n.image-trail {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 240px;\r\n    height: 180px;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .image-trail {\r\n        width: 160px;\r\n        height: 120px;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\n\r\nconst images = [\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/32168c0f102a0a3609399bc20fc588f5.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/klara-kulikova-7kup71V823I-unsplash-scaled.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/fg1-1.png\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/shutterstock_129822224@2x.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/mimi-thian-lp1AKIUV3yo-unsplash-scaled.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/christina-wocintechchat-com-zFd1L-XtrTE-unsplash-1-scaled.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/Mask-Group-40@2x.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/serious-businesswoman-with-documents-talking-on-P9Q6LX6@2x.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/EE4I2506-copy-24659-original-protected-min-1.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/03\/m010t0596_c_question_mark_11dec22-scaled.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/04\/pexels-ayomide-16940578.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/04\/pexels-yankrukov-8837809.jpg\",\r\n   \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/04\/pexels-yankrukov-8837809.jpg\",\r\n    \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/04\/pexels-yankrukov-8837809.jpg\",\r\n];\r\n\r\nconst container = document.getElementById(\"main-container\");\r\n\r\nlet currentImageIndex = 0;\r\nlet lastX = 0;\r\nlet lastY = 0;\r\nlet distanceThreshold = window.innerWidth < 900 ? 100 : 180;\r\n\r\nwindow.addEventListener(\"resize\", () => {\r\n    distanceThreshold = window.innerWidth < 900 ? 100 : 180;\r\n});\r\n\r\nwindow.addEventListener(\"mousemove\", (e) => {\r\n    const dx = e.clientX - lastX;\r\n    const dy = e.clientY - lastY;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    if (distance > distanceThreshold) {\r\n        createTrail(e.clientX, e.clientY);\r\n        lastX = e.clientX;\r\n        lastY = e.clientY;\r\n    }\r\n});\r\n\r\nfunction createTrail(x, y) {\r\n    \r\n    const img = document.createElement(\"img\");\r\n    img.classList.add(\"image-trail\");\r\n    img.src = images[currentImageIndex];\r\n    container.appendChild(img);\r\n\r\n    \r\n    currentImageIndex = (currentImageIndex + 1) % images.length;\r\n\r\n    gsap.set(img, {\r\n        x: x,\r\n        y: y,\r\n        scale: 0,\r\n        opacity: 0,\r\n        rotation: gsap.utils.random(-20, 20),\r\n    });\r\n\r\n    gsap.to(img, {\r\n        scale: 1,\r\n        opacity: 1,\r\n        duration: 0.4,\r\n        ease: \"power2.out\",\r\n    });\r\n\r\n    gsap.to(img, {\r\n        scale: 0.2,\r\n        opacity: 0,\r\n        duration: 1,\r\n        delay: 0.3,\r\n        ease: \"power2.in\",\r\n        onComplete: () => {\r\n            img.remove();\r\n        }\r\n    });\r\n}\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-147e6e6 e-con-full e-flex e-con e-parent\" data-id=\"147e6e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-90e9499 e-con-full e-flex e-con e-parent\" data-id=\"90e9499\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-7c435d1 e-flex e-con-boxed e-con e-child\" data-id=\"7c435d1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-896ba9b elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"896ba9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SUPER ONE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7be635 elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"e7be635\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SUPER ONE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7978c90 elementor-widget elementor-widget-image\" data-id=\"7978c90\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.5,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_direction&quot;:&quot;negative&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.5,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" 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=\"1200\" height=\"800\" src=\"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/09\/7xm68c9129f1a693.jpg\" class=\"attachment-2048x2048 size-2048x2048 wp-image-3330\" alt=\"\" \/>\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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-5520ce2 e-con-full e-flex e-con e-parent\" data-id=\"5520ce2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-2c6e531 e-flex e-con-boxed e-con e-child\" data-id=\"2c6e531\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae8e21a elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"ae8e21a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ICONIC BEAUTY<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9aa0283 elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"9aa0283\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ICONIC BEAUTY<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41eda6e elementor-widget elementor-widget-image\" data-id=\"41eda6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.5,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_direction&quot;:&quot;negative&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.5,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" 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 decoding=\"async\" width=\"1024\" height=\"800\" src=\"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/09\/7xm68c91261cd778-1024x800.jpg\" class=\"attachment-large size-large wp-image-3376\" alt=\"\" \/>\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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-36652fb e-con-full e-flex e-con e-parent\" data-id=\"36652fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6a6fd9 elementor-widget elementor-widget-html\" data-id=\"f6a6fd9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n#postcard-maker img { max-width: 300px; display: block; margin: 10px 0; }\r\ncanvas { border: 1px solid #ccc; margin-top: 15px; }\r\n<\/style>\r\n\r\n<div id=\"postcard-maker\">\r\n  <h3>Postcard Maker<\/h3>\r\n\r\n  <label>Upload Your Photo:<\/label>\r\n  <input type=\"file\" id=\"photoUpload\" accept=\"image\/*\"><br><br>\r\n\r\n  <button id=\"downloadBtn\">Download Postcard<\/button>\r\n  <br><br>\r\n\r\n  <canvas id=\"postcardCanvas\" width=\"800\" height=\"500\"><\/canvas>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n\r\n  const fixedBgURL = \"https:\/\/stellarkiwii.com\/wp-content\/uploads\/2025\/11\/elevated-view-crafts-object-paint-tube-paintbrush-scaled.jpg\"; \r\n  \/\/ \u2191 Change to your real URL\r\n\r\n  const photoUpload = document.getElementById(\"photoUpload\");\r\n  const canvas = document.getElementById(\"postcardCanvas\");\r\n  const ctx = canvas.getContext(\"2d\");\r\n\r\n  let bgImage = new Image();\r\n  let userImage = new Image();\r\n\r\n  \/\/ Load fixed background image\r\n  bgImage.src = fixedBgURL;\r\n  bgImage.onload = renderCanvas;\r\n\r\n  function renderCanvas() {\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n    \/\/ Draw background\r\n    ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);\r\n\r\n    \/\/ Draw user uploaded image\r\n    if (userImage.src) {\r\n      ctx.drawImage(userImage, 200, 100, 400, 300);\r\n    }\r\n  }\r\n\r\n  \/\/ Load user\u2019s uploaded image\r\n  photoUpload.addEventListener(\"change\", function(event) {\r\n    let file = event.target.files[0];\r\n    userImage.src = URL.createObjectURL(file);\r\n    userImage.onload = renderCanvas;\r\n  });\r\n\r\n  \/\/ Download final image\r\n  document.getElementById(\"downloadBtn\").addEventListener(\"click\", function() {\r\n    let link = document.createElement(\"a\");\r\n    link.download = \"postcard.png\";\r\n    link.href = canvas.toDataURL(\"image\/png\");\r\n    link.click();\r\n  });\r\n\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-efd1dcf e-flex e-con-boxed e-con e-parent\" data-id=\"efd1dcf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02b39c6 elementor-widget elementor-widget-html\" data-id=\"02b39c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\\<div style=\"max-width:430px;margin:auto;text-align:center;font-family:sans-serif;\">\r\n  <h3>Make Your Postcard<\/h3>\r\n\r\n  <!-- Upload -->\r\n  <input type=\"file\" id=\"upload\" accept=\"image\/*\"><br><br>\r\n\r\n  <!-- Frame Selector -->\r\n  <label><b>Choose 3D Frame:<\/b><\/label><br>\r\n  <select id=\"frameSelect\" style=\"padding:8px;width:100%;\">\r\n    <option value=\"none\">None<\/option>\r\n    <option value=\"glass\">3D Glass Frame<\/option>\r\n    <option value=\"silver\">Silver Metal Frame<\/option>\r\n    <option value=\"gold\">Gold Metal Frame<\/option>\r\n  <\/select>\r\n  <br><br>\r\n\r\n  <!-- Preview Area -->\r\n  <div id=\"previewArea\"\r\n       style=\"position:relative;width:400px;height:300px;margin:auto;overflow:hidden;border:2px solid #ccc;\">\r\n\r\n    <!-- User Photo -->\r\n    <img id=\"postcardImage\"\r\n         style=\"position:absolute;width:100%;height:100%;object-fit:cover;display:none;\">\r\n\r\n    <!-- Frame PNG -->\r\n    <img id=\"frameOverlay\"\r\n         style=\"position:absolute;width:100%;height:100%;pointer-events:none;\">\r\n  <\/div>\r\n\r\n  <br>\r\n  <button onclick=\"downloadCard()\" \r\n          style=\"padding:12px 20px;background:#0073e6;color:white;border:none;border-radius:6px;font-size:16px;\">\r\n      Download Postcard\r\n  <\/button>\r\n<\/div>\r\n\r\n<script>\r\n\/* FRAME PNG LINKS *\/\r\nconst frameImages = {\r\n  glass: \"https:\/\/i.imgur.com\/awyGxqw.png\",\r\n  silver: \"https:\/\/i.imgur.com\/AbjQio7.png\",\r\n  gold: \"https:\/\/i.imgur.com\/LDQVIow.png\"\r\n};\r\n\r\n\/* Upload image *\/\r\nupload.onchange = function () {\r\n  const file = this.files[0];\r\n  const reader = new FileReader();\r\n  reader.onload = e => {\r\n    postcardImage.src = e.target.result;\r\n    postcardImage.style.display = \"block\";\r\n  };\r\n  reader.readAsDataURL(file);\r\n};\r\n\r\n\/* Change frame *\/\r\nframeSelect.onchange = function () {\r\n  if (this.value === \"none\") {\r\n    frameOverlay.src = \"\";\r\n  } else {\r\n    frameOverlay.src = frameImages[this.value];\r\n  }\r\n};\r\n\r\n\/* Download postcard *\/\r\nfunction downloadCard() {\r\n  html2canvas(previewArea).then(canvas => {\r\n    let a = document.createElement(\"a\");\r\n    a.href = canvas.toDataURL(\"image\/png\");\r\n    a.download = \"postcard.png\";\r\n    a.click();\r\n  });\r\n}\r\n<\/script>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\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=\"aux-parallax-section elementor-element elementor-element-26c7c84 e-flex e-con-boxed e-con e-parent\" data-id=\"26c7c84\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6934ec elementor-widget elementor-widget-html\" data-id=\"b6934ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  #preview, #result {\r\n    max-width: 300px;\r\n    margin-top: 15px;\r\n    display: none;\r\n    border-radius: 10px;\r\n  }\r\n  #loader {\r\n    display: none;\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    color: #ff6600;\r\n  }\r\n<\/style>\r\n\r\n<h2>\ud83e\uddb8 Make Your Superhero Photo<\/h2>\r\n\r\n<input type=\"file\" id=\"uploadPhoto\" accept=\"image\/*\"><br><br>\r\n\r\n<img id=\"preview\" \/>\r\n\r\n<button id=\"generateBtn\" style=\"padding:10px 20px; background:#0073aa; color:white; border:none; border-radius:5px;\">\r\n  Generate Superhero\r\n<\/button>\r\n\r\n<p id=\"loader\">\u23f3 Generating your superhero\u2026 please wait...<\/p>\r\n\r\n<img id=\"result\" \/>\r\n\r\n<a id=\"downloadBtn\" style=\"display:none; padding:10px 20px; background:green; color:white; border-radius:5px;\" download=\"superhero.png\">\r\n  Download Image\r\n<\/a>\r\n\r\n<script>\r\nconst workerURL = \"https:\/\/superhero-api.parameshwariangala92.workers.dev\/\";\r\n\r\ndocument.getElementById(\"uploadPhoto\").onchange = function(event) {\r\n  const file = event.target.files[0];\r\n  if (!file) return;\r\n\r\n  const reader = new FileReader();\r\n  reader.onload = function(e) {\r\n    const preview = document.getElementById(\"preview\");\r\n    preview.src = e.target.result;\r\n    preview.style.display = \"block\";\r\n  };\r\n  reader.readAsDataURL(file);\r\n};\r\n\r\ndocument.getElementById(\"generateBtn\").onclick = async () => {\r\n  const fileInput = document.getElementById(\"uploadPhoto\");\r\n  const loader = document.getElementById(\"loader\");\r\n  const resultImg = document.getElementById(\"result\");\r\n  const downloadBtn = document.getElementById(\"downloadBtn\");\r\n\r\n  if (!fileInput.files.length) {\r\n    alert(\"Please upload a photo first.\");\r\n    return;\r\n  }\r\n\r\n  loader.style.display = \"block\";\r\n  resultImg.style.display = \"none\";\r\n  downloadBtn.style.display = \"none\";\r\n\r\n  const file = fileInput.files[0];\r\n  const reader = new FileReader();\r\n\r\n  reader.readAsDataURL(file);\r\n  reader.onload = async () => {\r\n    const base64Image = reader.result.replace(\/^data:image\\\/\\w+;base64,\/, \"\");\r\n\r\n    try {\r\n      const resp = await fetch(workerURL, {\r\n        method: \"POST\",\r\n        headers: { \"Content-Type\": \"application\/json\" },\r\n        body: JSON.stringify({\r\n          image: base64Image,\r\n          style: \"superhero\"\r\n        })\r\n      });\r\n\r\n      const data = await resp.json();\r\n      loader.style.display = \"none\";\r\n\r\n      if (data.output) {\r\n        resultImg.src = data.output;\r\n        resultImg.style.display = \"block\";\r\n\r\n        \/\/ Enable download\r\n        downloadBtn.href = data.output;\r\n        downloadBtn.style.display = \"inline-block\";\r\n      } else {\r\n        alert(\"AI Error: \" + JSON.stringify(data));\r\n      }\r\n    } catch (err) {\r\n      loader.style.display = \"none\";\r\n      alert(\"Request failed: \" + err.message);\r\n    }\r\n  };\r\n};\r\n<\/script>\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>MOVE YOUR MOUSE BUTTON SUPER ONE SUPER ONE ICONIC BEAUTY ICONIC BEAUTY Postcard Maker Upload Your Photo: Download Postcard Make Your Postcard Choose 3D Frame: None3D Glass FrameSilver Metal FrameGold Metal Frame Download Postcard \ud83e\uddb8 Make Your Superhero Photo Generate Superhero \u23f3 Generating your superhero\u2026 please wait&#8230; Download Image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3252","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/pages\/3252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/comments?post=3252"}],"version-history":[{"count":123,"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/pages\/3252\/revisions"}],"predecessor-version":[{"id":4178,"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/pages\/3252\/revisions\/4178"}],"wp:attachment":[{"href":"https:\/\/stellarkiwii.com\/index.php\/wp-json\/wp\/v2\/media?parent=3252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}