{"id":4839,"date":"2025-11-09T07:41:32","date_gmt":"2025-11-09T07:41:32","guid":{"rendered":"https:\/\/gopikadigital.com\/index.php\/user\/"},"modified":"2026-07-23T13:36:18","modified_gmt":"2026-07-23T13:36:18","slug":"user","status":"publish","type":"page","link":"https:\/\/gopikadigital.com\/index.php\/user\/","title":{"rendered":"User"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4839\" class=\"elementor elementor-4839\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"aux-parallax-section elementor-element elementor-element-431533eb e-flex e-con-boxed e-con e-parent\" data-id=\"431533eb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55c84c6b elementor-widget elementor-widget-shortcode\" data-id=\"55c84c6b\" data-element_type=\"widget\" data-e-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 class=\"um um-profile um-4837 um-role-\">\n\t<div class=\"um-form\" data-mode=\"profile\" data-form_id=\"4837\">\n\t\t\t<div class=\"um-cover\"\n\t\tdata-user_id=\"0\" data-ratio=\"2.7:1\">\n\t\t\n\t\t\t<div class=\"um-dropdown\" data-element=\"div.um-cover\" data-position=\"bc\" data-trigger=\"click\">\n\t\t\t\t<div class=\"um-dropdown-b\">\n\t\t\t\t\t<div class=\"um-dropdown-arr\"><i class=\"\"><\/i><\/div>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li><a href=\"javascript:void(0);\" class=\"um-manual-trigger\" data-parent=\".um-cover\" data-child=\".um-btn-auto-width\">Upload a cover photo<\/a><\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li><a href=\"javascript:void(0);\" class=\"um-dropdown-hide\">Cancel<\/a><\/li>\n\t\t\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div style=\"display: none !important;\"><div  id=\"um_field_4837_cover_photo\" class=\"um-field um-field-image  um-field-cover_photo um-field-image um-field-type_image\" data-key=\"cover_photo\" data-mode=\"\" data-upload-label=\"Upload\"><input type=\"hidden\" name=\"cover_photo\" id=\"cover_photo\" value=\"\"  aria-invalid=\"false\" \/><div class=\"um-field-label\"><label for=\"cover_photo\">Change your cover photo<\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\" style=\"text-align: center;\"><div class=\"um-single-image-preview crop\" data-crop=\"cover\" data-key=\"cover_photo\"><a href=\"javascript:void(0);\" class=\"cancel\"><i class=\"um-icon-close\"><\/i><\/a><img decoding=\"async\" class=\"fusion-lazyload-ignore\" src=\"\" alt=\"\" \/><div class=\"um-clear\"><\/div><\/div><a href=\"javascript:void(0);\" data-modal=\"um_upload_single\" data-modal-size=\"large\" data-modal-copy=\"1\" class=\"um-button um-btn-auto-width\">Upload<\/a><\/div><div class=\"um-modal-hidden-content\"><div class=\"um-modal-header\"> Change your cover photo<\/div><div class=\"um-modal-body\"><div class=\"um-single-image-preview crop\"  data-crop=\"cover\" data-ratio=\"2.7\" data-min_width=\"1000\" data-min_height=\"\" data-coord=\"\"><a href=\"javascript:void(0);\" class=\"cancel\"><i class=\"um-icon-close\"><\/i><\/a><img decoding=\"async\" class=\"fusion-lazyload-ignore\" src=\"\" alt=\"\" \/><div class=\"um-clear\"><\/div><\/div><div class=\"um-clear\"><\/div><div class=\"um-single-image-upload\" data-user_id=\"\" data-nonce=\"9b702f7aff\" data-timestamp=\"1788366483\"  data-set_id=\"4837\" data-set_mode=\"\" data-type=\"image\" data-key=\"cover_photo\" data-max_size=\"999999999\" data-max_size_error=\"This image is too large!\" data-min_size_error=\"This image is too small!\" data-extension_error=\"Sorry this is not a valid image.\" data-allowed_types=\"gif,jpg,jpeg,png,webp\" data-accept=\"image\/gif,image\/jpeg,image\/jpeg,image\/png,image\/webp\" data-upload_text=\"Upload profile cover here&lt;small class=&quot;um-max-filesize&quot;&gt;( max: &lt;span&gt;953.7MB&lt;\/span&gt; )&lt;\/small&gt;\" data-max_files_error=\"You can only upload one image\" data-upload_help_text=\"\">Upload<\/div><div class=\"um-modal-footer\">\n\t\t\t\t\t\t\t\t\t<div class=\"um-modal-right\">\n\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"um-modal-btn um-finish-upload image disabled\" data-key=\"cover_photo\" data-change=\"Change photo\" data-processing=\"Processing...\">Apply<\/a>\n\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"um-modal-btn alt\" data-action=\"um_remove_modal\"> Cancel<\/a>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"um-clear\"><\/div>\n\t\t\t\t\t\t\t\t<\/div><\/div><\/div><\/div><\/div>\t\t<div class=\"um-cover-e\" data-ratio=\"2.7:1\">\n\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"um-cover-add\"><span class=\"um-cover-add-i\"><i\n\t\t\t\t\tclass=\"um-icon-plus um-tip-n\"\n\t\t\t\t\ttitle=\"Upload a cover photo\"><\/i><\/span><\/a>\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\n\t<div class=\"um-header\">\n\n\t\t\n\t\t<div class=\"um-profile-photo\" data-user_id=\"0\"  aria-invalid=\"false\" >\n\n\t\t\t<a href=\"\" class=\"um-profile-photo-img\" title=\"\">\n\t\t\t\t<span class=\"um-profile-photo-overlay\">\n\t\t\t<span class=\"um-profile-photo-overlay-s\">\n\t\t\t\t<ins>\n\t\t\t\t\t<i class=\"um-faicon-camera\"><\/i>\n\t\t\t\t<\/ins>\n\t\t\t<\/span>\n\t\t<\/span><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/?s=190&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/?s=380&#038;d=mm&#038;r=g 2x' class='avatar avatar-190 photo avatar-default' height='190' width='190' \/>\t\t\t<\/a>\n\n\t\t\t<div style=\"display: none !important;\"><div  id=\"um_field_4837_profile_photo\" class=\"um-field um-field-image  um-field-profile_photo um-field-image um-field-type_image\" data-key=\"profile_photo\" data-mode=\"\" data-upload-label=\"Upload\"><input type=\"hidden\" name=\"profile_photo\" id=\"profile_photo\" value=\"\"  aria-invalid=\"false\" \/><div class=\"um-field-label\"><label for=\"profile_photo\">Change your profile photo<\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\" style=\"text-align: center;\"><div class=\"um-single-image-preview crop\" data-crop=\"square\" data-key=\"profile_photo\"><a href=\"javascript:void(0);\" class=\"cancel\"><i class=\"um-icon-close\"><\/i><\/a><img decoding=\"async\" class=\"fusion-lazyload-ignore\" src=\"\" alt=\"\" \/><div class=\"um-clear\"><\/div><\/div><a href=\"javascript:void(0);\" data-modal=\"um_upload_single\" data-modal-size=\"normal\" data-modal-copy=\"1\" class=\"um-button um-btn-auto-width\">Upload<\/a><\/div><div class=\"um-modal-hidden-content\"><div class=\"um-modal-header\"> Change your profile photo<\/div><div class=\"um-modal-body\"><div class=\"um-single-image-preview crop\"  data-crop=\"square\" data-ratio=\"1\" data-min_width=\"190\" data-min_height=\"190\" data-coord=\"\"><a href=\"javascript:void(0);\" class=\"cancel\"><i class=\"um-icon-close\"><\/i><\/a><img decoding=\"async\" class=\"fusion-lazyload-ignore\" src=\"\" alt=\"\" \/><div class=\"um-clear\"><\/div><\/div><div class=\"um-clear\"><\/div><div class=\"um-single-image-upload\" data-user_id=\"\" data-nonce=\"9b702f7aff\" data-timestamp=\"1788366483\"  data-set_id=\"4837\" data-set_mode=\"\" data-type=\"image\" data-key=\"profile_photo\" data-max_size=\"999999999\" data-max_size_error=\"This image is too large!\" data-min_size_error=\"This image is too small!\" data-extension_error=\"Sorry this is not a valid image.\" data-allowed_types=\"gif,jpg,jpeg,png,webp\" data-accept=\"image\/gif,image\/jpeg,image\/jpeg,image\/png,image\/webp\" data-upload_text=\"Upload your photo here&lt;small class=&quot;um-max-filesize&quot;&gt;( max: &lt;span&gt;953.7MB&lt;\/span&gt; )&lt;\/small&gt;\" data-max_files_error=\"You can only upload one image\" data-upload_help_text=\"\">Upload<\/div><div class=\"um-modal-footer\">\n\t\t\t\t\t\t\t\t\t<div class=\"um-modal-right\">\n\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"um-modal-btn um-finish-upload image disabled\" data-key=\"profile_photo\" data-change=\"Change photo\" data-processing=\"Processing...\">Apply<\/a>\n\t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"um-modal-btn alt\" data-action=\"um_remove_modal\"> Cancel<\/a>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"um-clear\"><\/div>\n\t\t\t\t\t\t\t\t<\/div><\/div><\/div><\/div><\/div>\n\t\t\t<div class=\"um-dropdown\" data-element=\"div.um-profile-photo\" data-position=\"bc\" data-trigger=\"click\">\n\t\t\t\t<div class=\"um-dropdown-b\">\n\t\t\t\t\t<div class=\"um-dropdown-arr\"><i class=\"\"><\/i><\/div>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li><a href=\"javascript:void(0);\" class=\"um-manual-trigger\" data-parent=\".um-profile-photo\" data-child=\".um-btn-auto-width\" data-alt_text=\"Change photo\">Upload photo<\/a><\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li><a href=\"javascript:void(0);\" class=\"um-reset-profile-photo\" data-user_id=\"0\" data-default_src=\"https:\/\/gopikadigital.com\/wp-content\/plugins\/ultimate-member\/assets\/img\/default_avatar.jpg\" style=\"display:none;\">Remove photo<\/a><\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li><a href=\"javascript:void(0);\" class=\"um-dropdown-hide\">Cancel<\/a><\/li>\n\t\t\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t<\/div>\n\n\t\t<div class=\"um-profile-meta\">\n\n\t\t\t\n\t\t\t<div class=\"um-main-meta\">\n\n\t\t\t\t\t\t\t\t\t<div class=\"um-name\">\n\n\t\t\t\t\t\t<a href=\"\"\n\t\t\t\t\t\t\ttitle=\"\"><\/a>\n\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t<div class=\"um-clear\"><\/div>\n\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"um-meta\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t<div class=\"um-profile-status \">\n\t\t\t\t<span>\n\t\t\t\t\tThis user account status is Undefined\t\t\t\t<\/span>\n\t\t\t<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t<div class=\"um-clear\"><\/div>\n\n\t\t\n\t<\/div>\n\n\t\n\t\t<div class=\"um-profile-navbar \">\n\t\t\t\t\t\t<div class=\"um-clear\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t\t<div class=\"um-profile-nav\">\n\n\t\t\t\t\n\t\t\t\t\t<div class=\"um-profile-nav-item um-profile-nav-main  active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839?profiletab=main\" class=\"uimob800-show uimob500-show uimob340-show um-tip-n\"\n\t\t\t\t\t\t\t   title=\"About\" original-title=\"About\" >\n\n\t\t\t\t\t\t\t\t<i class=\"um-faicon-user\"><\/i>\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"uimob800-hide uimob500-hide uimob340-hide title\">About<\/span>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a href=\"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839?profiletab=main\" class=\"uimob800-hide uimob500-hide uimob340-hide\"\n\t\t\t\t\t\t\t   title=\"About\" >\n\n\t\t\t\t\t\t\t\t<i class=\"um-faicon-user\"><\/i>\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"title\">About<\/span>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\t\t<div class=\"um-profile-nav-item um-profile-nav-posts \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839?profiletab=posts\" class=\"uimob800-show uimob500-show uimob340-show um-tip-n\"\n\t\t\t\t\t\t\t   title=\"Posts\" original-title=\"Posts\" >\n\n\t\t\t\t\t\t\t\t<i class=\"um-faicon-pencil\"><\/i>\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"uimob800-hide uimob500-hide uimob340-hide title\">Posts<\/span>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a href=\"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839?profiletab=posts\" class=\"uimob800-hide uimob500-hide uimob340-hide\"\n\t\t\t\t\t\t\t   title=\"Posts\" >\n\n\t\t\t\t\t\t\t\t<i class=\"um-faicon-pencil\"><\/i>\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"title\">Posts<\/span>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\t\t<div class=\"um-profile-nav-item um-profile-nav-comments \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839?profiletab=comments\" class=\"uimob800-show uimob500-show uimob340-show um-tip-n\"\n\t\t\t\t\t\t\t   title=\"Comments\" original-title=\"Comments\" >\n\n\t\t\t\t\t\t\t\t<i class=\"um-faicon-comment\"><\/i>\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"uimob800-hide uimob500-hide uimob340-hide title\">Comments<\/span>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a href=\"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839?profiletab=comments\" class=\"uimob800-hide uimob500-hide uimob340-hide\"\n\t\t\t\t\t\t\t   title=\"Comments\" >\n\n\t\t\t\t\t\t\t\t<i class=\"um-faicon-comment\"><\/i>\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<span class=\"title\">Comments<\/span>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\t<div class=\"um-clear\"><\/div>\n\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<div class=\"um-profile-body main main-default\">\n\n\t\t\t\t\t<p class=\"um-profile-note\"><i class=\"um-faicon-frown-o\"><\/i><span>This user has not added any information to their profile yet.<\/span><\/p><div class=\"um-row _um_row_1 \" style=\"margin: 0 0 30px 0;\"><div class=\"um-col-121\"><div  class=\"um-field um-field-shortcode  um-field-shortcode um-field-type_shortcode\" data-key=\"um_shortcode_4837_19\">[gdrive_video]<\/div><\/div><div class=\"um-col-122\"><\/div><div class=\"um-clear\"><\/div><\/div>\t\t\t\t\t<div class=\"clear\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n<\/div>\n<style>\n\t\t\t.um-4837.um {\n\t\t\tmax-width: 1000px;\n\t\t}\n\t\t<\/style>\n<style>\n\t\t\t.um-4837.um .um-profile-body {\n\t\t\tmax-width: 600px;\n\t\t}\n\t\t.um-4837.um .um-profile-photo a.um-profile-photo-img {\n\t\twidth: 190px;\n\t\theight: 190px;\n\t}\n\t.um-4837.um .um-profile-photo a.um-profile-photo-img {\n\t\ttop: -105px;\n\t}\n\t\t\t.um-4837.um .um-profile-meta {\n\t\t\tpadding-left: 250px;\n\t\t}\n\t<\/style>\n<\/div>\n\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<div class=\"aux-parallax-section elementor-element elementor-element-c57afac e-flex e-con-boxed e-con e-parent\" data-id=\"c57afac\" 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-0f3990e elementor-invisible elementor-widget elementor-widget-html\" data-id=\"0f3990e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_tilt_effect&quot;:&quot;yes&quot;,&quot;_animation&quot;:&quot;pulse&quot;,&quot;motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;motion_fx_tilt_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]}}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .upload-wrapper {\r\n    text-align: center;\r\n    margin: 20px auto;\r\n  }\r\n\r\n  #preview {\r\n    display: center;\r\n    max-width: 500px;\r\n    margin-top: 20px;\r\n    border-radius: 10px;\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  input[type=\"file\"] {\r\n    padding: 50px;\r\n    border: 2px dashed #ccc;\r\n    cursor: pointer;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"upload-wrapper\">\r\n  <h3>Upload Your Image For 3d Tilt Animation \ud83d\udc47<\/h3>\r\n  <input type=\"file\" id=\"imgInput\" accept=\"image\/*\" \/>\r\n  <br \/>\r\n  <img id=\"preview\" class=\"elementor-animation-pulse\" \/>\r\n<\/div>\r\n\r\n<script>\r\n  document.getElementById('imgInput').addEventListener('change', function(e) {\r\n    const reader = new FileReader();\r\n    reader.onload = function(event) {\r\n      const img = document.getElementById('preview');\r\n      img.src = event.target.result;\r\n      img.style.display = 'block';\r\n    };\r\n    reader.readAsDataURL(e.target.files[0]);\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<div class=\"aux-parallax-section elementor-element elementor-element-f8ee5dc e-con-full e-flex e-con e-parent\" data-id=\"f8ee5dc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cd2ed2 elementor-widget elementor-widget-html\" data-id=\"7cd2ed2\" 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<!-- HTML -->\r\n<div id=\"main-container\">\r\n    <div class=\"heading\">\r\n        <h1>Move your mouse fast over this Black Space!<\/h1>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div id=\"upload-section\">\r\n    <input type=\"file\" id=\"image-upload\" accept=\"image\/*\" multiple>\r\n    <p id=\"upload-info\">Upload up to 14 images to see your animation!<\/p>\r\n<\/div>\r\n\r\n<!-- GSAP Library -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n\r\n<style>\r\n#main-container{\r\n    position: relative;\r\n    height: 80vh; \/* Adjust as needed *\/\r\n    overflow: hidden;\r\n    background: #111;\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    margin: 2rem 0;\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    border-radius: 8px;\r\n}\r\n\r\n#upload-section {\r\n    text-align: center;\r\n    margin-top: 1rem;\r\n    color: #fff;\r\n}\r\n\r\n#upload-info {\r\n    margin-top: 0.5rem;\r\n    font-size: 1rem;\r\n    color: #00b3ff;\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<\/style>\r\n\r\n<script>\r\nconst container = document.getElementById('main-container');\r\nlet images = []; \/\/ array for uploaded images\r\nlet currentImageIndex = 0;\r\nlet lastX = 0;\r\nlet lastY = 0;\r\nlet distanceThreshold = window.innerWidth < 900 ? 100 : 180;\r\n\r\n\/\/ Handle resize\r\nwindow.addEventListener(\"resize\", () => {\r\n    distanceThreshold = window.innerWidth < 900 ? 100 : 180;\r\n});\r\n\r\n\/\/ Mouse move\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\n\/\/ Create trail function\r\nfunction createTrail(x, y) {\r\n    if (images.length === 0) return; \/\/ No images uploaded\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    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: () => img.remove(),\r\n    });\r\n}\r\n\r\n\/\/ Image upload\r\nconst uploadInput = document.getElementById('image-upload');\r\nconst uploadInfo = document.getElementById('upload-info');\r\n\r\nuploadInput.addEventListener('change', (e) => {\r\n    const files = Array.from(e.target.files).slice(0, 14); \/\/ Limit to 14\r\n    images = [];\r\n\r\n    if (files.length === 0) {\r\n        uploadInfo.textContent = \"No images selected.\";\r\n        return;\r\n    }\r\n\r\n    files.forEach(file => {\r\n        const reader = new FileReader();\r\n        reader.onload = (event) => {\r\n            images.push(event.target.result);\r\n        }\r\n        reader.readAsDataURL(file);\r\n    });\r\n\r\n    uploadInfo.textContent = `${files.length} image(s) uploaded! Move your mouse to see the trail.`;\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-d363a1f e-flex e-con-boxed e-con e-parent\" data-id=\"d363a1f\" 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-89c054d elementor-widget elementor-widget-html\" data-id=\"89c054d\" 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<!-- Photo Frame Generator: Elementor-safe v3 -->\r\n<div id=\"pfxStudio\" class=\"pf-studio\">\r\n  <div class=\"pf-shell\">\r\n    <aside class=\"pf-panel\">\r\n      <div class=\"pf-kicker\">PERSONALISED FRAME STUDIO<\/div>\r\n      <h2>Create Your Photo Frame<\/h2>\r\n      <p class=\"pf-intro\">\r\n        Choose a design, upload your own photographs, customise the wording,\r\n        and download a print-ready PNG.\r\n      <\/p>\r\n\r\n      <div class=\"pf-section-title\">1. Choose a frame<\/div>\r\n      <div class=\"pf-template-grid\" role=\"radiogroup\" aria-label=\"Frame style\">\r\n        <button class=\"pf-template is-active\" type=\"button\" data-template=\"story\" aria-pressed=\"true\">\r\n          <span class=\"pf-template-art pf-story-art\">\r\n            <i><\/i><i><\/i><i><\/i><i><\/i><b><\/b>\r\n          <\/span>\r\n          <strong>Portrait Story<\/strong>\r\n          <small>5 photos<\/small>\r\n        <\/button>\r\n\r\n        <button class=\"pf-template\" type=\"button\" data-template=\"kids\" aria-pressed=\"false\">\r\n          <span class=\"pf-template-art pf-kids-art\">\r\n            <b><\/b><i><\/i><i><\/i><i><\/i>\r\n          <\/span>\r\n          <strong>Kids Birthday<\/strong>\r\n          <small>4 photos<\/small>\r\n        <\/button>\r\n\r\n        <button class=\"pf-template\" type=\"button\" data-template=\"love\" aria-pressed=\"false\">\r\n          <span class=\"pf-template-art pf-love-art\">\r\n            <i><\/i><i><\/i><i><\/i><i><\/i><b>\u00e2\u2122\u00a5<\/b>\r\n          <\/span>\r\n          <strong>Love Photo Ring<\/strong>\r\n          <small>10 photos<\/small>\r\n        <\/button>\r\n\r\n        <button class=\"pf-template\" type=\"button\" data-template=\"calendar\" aria-pressed=\"false\">\r\n          <span class=\"pf-template-art pf-calendar-art\">\r\n            <i><\/i><i><\/i><i><\/i><b><\/b>\r\n          <\/span>\r\n          <strong>Birthday Calendar<\/strong>\r\n          <small>5 photos<\/small>\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div class=\"pf-section-title\">2. Upload photos<\/div>\r\n      <label class=\"pf-upload\" for=\"pfxFiles\">\r\n        <span class=\"pf-upload-icon\">+<\/span>\r\n        <span>\r\n          <strong id=\"pfxUploadTitle\">Upload up to 5 photos<\/strong>\r\n          <small>JPG, PNG or WebP \u00c2\u00b7 maximum 12 MB each<\/small>\r\n        <\/span>\r\n      <\/label>\r\n      <input id=\"pfxFiles\" type=\"file\" accept=\"image\/jpeg,image\/png,image\/webp\" multiple>\r\n      <div class=\"pf-status-row\">\r\n        <span id=\"pfxStatus\">No photos selected<\/span>\r\n        <span id=\"pfxCounter\">0 \/ 5<\/span>\r\n      <\/div>\r\n      <div id=\"pfxThumbs\" class=\"pf-thumbs\" aria-live=\"polite\"><\/div>\r\n\r\n      <div class=\"pf-section-title\">3. Add your wording<\/div>\r\n      <label class=\"pf-field\">\r\n        <span>Top line<\/span>\r\n        <input id=\"pfxEyebrow\" type=\"text\" maxlength=\"45\" value=\"A BEAUTIFUL MEMORY\">\r\n      <\/label>\r\n      <label class=\"pf-field\">\r\n        <span>Main title or name<\/span>\r\n        <input id=\"pfxTitle\" type=\"text\" maxlength=\"45\" value=\"My Story\">\r\n      <\/label>\r\n      <label class=\"pf-field\">\r\n        <span>Message<\/span>\r\n        <textarea id=\"pfxMessage\" rows=\"4\" maxlength=\"260\">Every picture tells a part of your beautiful story.<\/textarea>\r\n      <\/label>\r\n\r\n      <div id=\"pfxDateControls\" class=\"pf-date-controls\" hidden>\r\n        <label class=\"pf-field\">\r\n          <span>Birthday date<\/span>\r\n          <input id=\"pfxDate\" type=\"date\">\r\n        <\/label>\r\n      <\/div>\r\n\r\n      <div class=\"pf-color-row\">\r\n        <label class=\"pf-field pf-color-field\">\r\n          <span>Accent<\/span>\r\n          <input id=\"pfxAccent\" type=\"color\" value=\"#d94753\">\r\n        <\/label>\r\n        <label class=\"pf-check\">\r\n          <input id=\"pfxShowDate\" type=\"checkbox\" checked>\r\n          <span>Show date stamp<\/span>\r\n        <\/label>\r\n      <\/div>\r\n\r\n      <div class=\"pf-actions\">\r\n        <button id=\"pfxShuffle\" class=\"pf-secondary\" type=\"button\">Shuffle Photos<\/button>\r\n        <button id=\"pfxDownload\" type=\"button\" disabled>Download PNG<\/button>\r\n        <button id=\"pfxReset\" class=\"pf-reset\" type=\"button\">Clear Everything<\/button>\r\n      <\/div>\r\n\r\n      <div id=\"pfxNotice\" class=\"pf-notice\" aria-live=\"polite\"><\/div>\r\n      <div class=\"pf-privacy\">\r\n        <strong>Private by design:<\/strong> photographs are processed only in the visitor\u00e2\u20ac\u2122s browser.\r\n        Nothing is uploaded to WordPress. Images are removed from browser memory after download or reset.\r\n      <\/div>\r\n    <\/aside>\r\n\r\n    <main class=\"pf-preview-wrap\">\r\n      <div class=\"pf-preview-head\">\r\n        <span>LIVE PREVIEW<\/span>\r\n        <span>1200 \u00c3\u2014 1500 PNG<\/span>\r\n      <\/div>\r\n      <div class=\"pf-canvas-stage\">\r\n        <canvas id=\"pfxCanvas\" width=\"1200\" height=\"1500\"><\/canvas>\r\n      <\/div>\r\n    <\/main>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n#pfxStudio,\r\n#pfxStudio * { box-sizing: border-box; }\r\n\r\n#pfxStudio {\r\n  --pf-accent: #d94753;\r\n  --pf-ink: #171717;\r\n  --pf-muted: #716c66;\r\n  --pf-paper: #fffdf9;\r\n  font-family: Inter, Arial, sans-serif;\r\n  color: var(--pf-ink);\r\n}\r\n\r\n#pfxStudio button,\r\n#pfxStudio input,\r\n#pfxStudio textarea { font: inherit; }\r\n\r\n#pfxStudio .pf-shell {\r\n  display: grid;\r\n  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);\r\n  gap: 24px;\r\n  padding: 22px;\r\n  border: 1px solid #e5ded5;\r\n  border-radius: 28px;\r\n  background: #efeae4;\r\n}\r\n\r\n#pfxStudio .pf-panel,\r\n#pfxStudio .pf-preview-wrap {\r\n  border-radius: 22px;\r\n  box-shadow: 0 20px 55px rgba(45, 35, 27, .14);\r\n}\r\n\r\n#pfxStudio .pf-panel {\r\n  padding: 26px;\r\n  background: var(--pf-paper);\r\n}\r\n\r\n#pfxStudio .pf-kicker {\r\n  color: var(--pf-accent);\r\n  font-size: 11px;\r\n  font-weight: 900;\r\n  letter-spacing: .16em;\r\n}\r\n\r\n#pfxStudio h2 {\r\n  margin: 9px 0 8px;\r\n  font: 800 clamp(28px, 4vw, 36px)\/1.04 Georgia, serif;\r\n}\r\n\r\n#pfxStudio .pf-intro {\r\n  margin: 0;\r\n  color: var(--pf-muted);\r\n  font-size: 14px;\r\n  line-height: 1.6;\r\n}\r\n\r\n#pfxStudio .pf-section-title {\r\n  margin: 23px 0 10px;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  letter-spacing: .05em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#pfxStudio .pf-template-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 10px;\r\n}\r\n\r\n#pfxStudio .pf-template {\r\n  min-height: 132px;\r\n  padding: 10px;\r\n  border: 2px solid transparent;\r\n  border-radius: 15px;\r\n  color: #24211e;\r\n  background: #f4f0ea;\r\n  cursor: pointer;\r\n  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;\r\n}\r\n\r\n#pfxStudio .pf-template:hover { transform: translateY(-2px); }\r\n#pfxStudio .pf-template { touch-action: manipulation; position: relative; z-index: 2; }\r\n#pfxStudio .pf-template > * { pointer-events: none; }\r\n\r\n#pfxStudio .pf-template.is-active {\r\n  border-color: var(--pf-accent);\r\n  background: #fff;\r\n  box-shadow: 0 9px 22px rgba(0,0,0,.09);\r\n}\r\n\r\n#pfxStudio .pf-template strong,\r\n#pfxStudio .pf-template small { display: block; }\r\n\r\n#pfxStudio .pf-template strong { margin-top: 8px; font-size: 12px; }\r\n#pfxStudio .pf-template small { margin-top: 2px; color: #7a746d; font-size: 10px; }\r\n\r\n#pfxStudio .pf-template-art {\r\n  position: relative;\r\n  display: block;\r\n  height: 72px;\r\n  overflow: hidden;\r\n  border-radius: 9px;\r\n  background: #24211e;\r\n}\r\n\r\n#pfxStudio .pf-story-art { background: linear-gradient(145deg,#f6e8dc,#eed2c4); }\r\n#pfxStudio .pf-story-art i { position:absolute; top:12px; width:22%; height:42px; background:#9e5a53; border-radius:3px; }\r\n#pfxStudio .pf-story-art i:nth-child(1){left:6%;}.pf-story-art i:nth-child(2){left:29%;}.pf-story-art i:nth-child(3){left:52%;}.pf-story-art i:nth-child(4){left:75%;}\r\n#pfxStudio .pf-story-art b { position:absolute; left:34%; bottom:-10px; width:34%; height:52px; border-radius:50% 50% 12% 12%; background:#372c2a; }\r\n\r\n#pfxStudio .pf-kids-art { background: radial-gradient(circle at 50% 42%,#fff7b8 0 10%,transparent 11%), radial-gradient(circle at 18% 18%,rgba(255,255,255,.7) 0 8%,transparent 9%), radial-gradient(circle at 82% 25%,rgba(255,255,255,.55) 0 7%,transparent 8%), linear-gradient(160deg,#ff8db1,#8fddff 48%,#ffe07a 100%); }\r\n#pfxStudio .pf-kids-art b { position:absolute; left:28%; top:10px; width:44%; height:53px; border-radius:50%; background:#d48466; box-shadow:0 0 0 5px rgba(255,255,255,.8); }\r\n#pfxStudio .pf-kids-art i { position:absolute; width:18px; height:18px; border-radius:50%; background:#6bc8db; }\r\n#pfxStudio .pf-kids-art i:nth-of-type(1){left:10px;top:12px}.pf-kids-art i:nth-of-type(2){right:9px;top:13px}.pf-kids-art i:nth-of-type(3){right:18px;bottom:7px;background:#f26b7a}\r\n\r\n#pfxStudio .pf-love-art { background:#101010; }\r\n#pfxStudio .pf-love-art i { position:absolute; width:22px; height:28px; border:3px solid white; background:#c58d74; }\r\n#pfxStudio .pf-love-art i:nth-child(1){left:8px;top:8px;transform:rotate(-10deg)}.pf-love-art i:nth-child(2){right:8px;top:8px;transform:rotate(9deg)}.pf-love-art i:nth-child(3){left:10px;bottom:7px;transform:rotate(8deg)}.pf-love-art i:nth-child(4){right:10px;bottom:7px;transform:rotate(-8deg)}\r\n#pfxStudio .pf-love-art b { position:absolute; inset:0; display:grid; place-items:center; color:#e7333f; font-size:25px; }\r\n\r\n#pfxStudio .pf-calendar-art { background:linear-gradient(120deg,#231d1b,#59443a); }\r\n#pfxStudio .pf-calendar-art b { position:absolute; right:5px; top:5px; width:47%; height:62px; border-radius:8px; background:#bd725f; }\r\n#pfxStudio .pf-calendar-art i { position:absolute; left:7px; width:27px; height:20px; border:2px solid #fff; background:#7e4a3e; }\r\n#pfxStudio .pf-calendar-art i:nth-child(1){top:6px}.pf-calendar-art i:nth-child(2){top:29px}.pf-calendar-art i:nth-child(3){top:52px}\r\n\r\n#pfxStudio input[type=\"file\"] { display:none; }\r\n\r\n#pfxStudio .pf-upload {\r\n  display:flex;\r\n  align-items:center;\r\n  gap:13px;\r\n  padding:15px;\r\n  border:2px dashed #d9c1b5;\r\n  border-radius:14px;\r\n  background:#fff4ee;\r\n  cursor:pointer;\r\n}\r\n\r\n#pfxStudio .pf-upload-icon {\r\n  display:grid;\r\n  place-items:center;\r\n  flex:0 0 43px;\r\n  width:43px;\r\n  height:43px;\r\n  border-radius:50%;\r\n  color:white;\r\n  background:var(--pf-accent);\r\n  font-size:28px;\r\n  line-height:1;\r\n}\r\n\r\n#pfxStudio .pf-upload strong,\r\n#pfxStudio .pf-upload small { display:block; }\r\n#pfxStudio .pf-upload strong { font-size:13px; }\r\n#pfxStudio .pf-upload small { margin-top:3px; color:#786f68; font-size:10px; }\r\n\r\n#pfxStudio .pf-status-row {\r\n  display:flex;\r\n  justify-content:space-between;\r\n  gap:10px;\r\n  min-height:20px;\r\n  padding:8px 1px 0;\r\n  color:#706a64;\r\n  font-size:11px;\r\n}\r\n\r\n#pfxStudio .pf-thumbs {\r\n  display:grid;\r\n  grid-template-columns:repeat(5,1fr);\r\n  gap:6px;\r\n}\r\n\r\n#pfxStudio .pf-thumb {\r\n  position:relative;\r\n  aspect-ratio:1;\r\n  overflow:hidden;\r\n  border:1px solid #ddd3ca;\r\n  border-radius:8px;\r\n  background:#eee8e2;\r\n}\r\n\r\n#pfxStudio .pf-thumb img { width:100%; height:100%; object-fit:cover; display:block; }\r\n#pfxStudio .pf-thumb span { position:absolute; left:4px; bottom:3px; min-width:16px; padding:1px 4px; border-radius:10px; color:white; background:rgba(0,0,0,.65); font-size:9px; text-align:center; }\r\n\r\n#pfxStudio .pf-field { display:block; margin-top:11px; }\r\n#pfxStudio .pf-field > span { display:block; margin-bottom:6px; font-size:11px; font-weight:800; }\r\n#pfxStudio input[type=\"text\"],\r\n#pfxStudio input[type=\"date\"],\r\n#pfxStudio textarea {\r\n  width:100%;\r\n  border:1px solid #ded6ce;\r\n  border-radius:10px;\r\n  background:white;\r\n  padding:11px 12px;\r\n  color:#24211e;\r\n  outline:none;\r\n}\r\n#pfxStudio textarea { resize:vertical; min-height:84px; }\r\n#pfxStudio input:focus,\r\n#pfxStudio textarea:focus { border-color:var(--pf-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--pf-accent) 15%,transparent); }\r\n\r\n#pfxStudio .pf-color-row { display:flex; align-items:end; gap:16px; margin-top:4px; }\r\n#pfxStudio .pf-color-field { width:90px; }\r\n#pfxStudio input[type=\"color\"] { width:100%; height:43px; padding:3px; border:1px solid #ddd4cc; border-radius:9px; background:white; }\r\n#pfxStudio .pf-check { display:flex; align-items:center; gap:8px; min-height:43px; font-size:12px; font-weight:700; }\r\n#pfxStudio .pf-check input { accent-color:var(--pf-accent); }\r\n\r\n#pfxStudio .pf-actions {\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:9px;\r\n  margin-top:19px;\r\n}\r\n\r\n#pfxStudio .pf-actions button {\r\n  min-height:46px;\r\n  border:0;\r\n  border-radius:11px;\r\n  color:white;\r\n  background:var(--pf-accent);\r\n  font-weight:800;\r\n  cursor:pointer;\r\n}\r\n\r\n#pfxStudio .pf-actions button:disabled { opacity:.45; cursor:not-allowed; }\r\n#pfxStudio .pf-actions .pf-secondary { color:#6e322e; background:#f4d9d6; }\r\n#pfxStudio .pf-actions .pf-reset { grid-column:1\/-1; color:#625c56; background:#ece7e1; }\r\n\r\n#pfxStudio .pf-notice { min-height:19px; margin-top:8px; font-size:11px; font-weight:700; }\r\n#pfxStudio .pf-privacy { margin-top:11px; padding:11px; border-radius:10px; color:#625d57; background:#f1ede8; font-size:10px; line-height:1.5; }\r\n\r\n#pfxStudio .pf-preview-wrap { padding:18px; background:#171513; }\r\n#pfxStudio .pf-preview-head { display:flex; justify-content:space-between; gap:14px; padding:2px 3px 13px; color:white; font-size:11px; font-weight:700; }\r\n#pfxStudio .pf-canvas-stage { display:grid; place-items:center; min-height:620px; padding:16px; border-radius:16px; background:radial-gradient(circle at 50% 20%,#3c3732,#161412 70%); }\r\n#pfxStudio canvas { display:block; width:min(100%,600px); height:auto; border-radius:5px; background:#ddd; box-shadow:0 25px 60px rgba(0,0,0,.48); }\r\n\r\n@media (max-width:920px){\r\n  #pfxStudio .pf-shell{grid-template-columns:1fr}\r\n  #pfxStudio .pf-preview-wrap{order:-1}\r\n  #pfxStudio .pf-canvas-stage{min-height:0}\r\n}\r\n\r\n@media (max-width:520px){\r\n  #pfxStudio .pf-shell{padding:10px;border-radius:18px}\r\n  #pfxStudio .pf-panel{padding:18px}\r\n  #pfxStudio .pf-template-grid{grid-template-columns:1fr 1fr}\r\n  #pfxStudio .pf-actions{grid-template-columns:1fr}\r\n  #pfxStudio .pf-actions .pf-reset{grid-column:auto}\r\n  #pfxStudio .pf-preview-head{font-size:9px}\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById('pfxStudio');\r\n  if (!root || root.dataset.pfxReady === '1') return;\r\n  root.dataset.pfxReady = '1';\r\n\r\n  const $ = selector => root.querySelector(selector);\r\n  const $$ = selector => Array.from(root.querySelectorAll(selector));\r\n  const canvas = $('#pfxCanvas');\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  const els = {\r\n    files: $('#pfxFiles'),\r\n    thumbs: $('#pfxThumbs'),\r\n    status: $('#pfxStatus'),\r\n    counter: $('#pfxCounter'),\r\n    uploadTitle: $('#pfxUploadTitle'),\r\n    eyebrow: $('#pfxEyebrow'),\r\n    title: $('#pfxTitle'),\r\n    message: $('#pfxMessage'),\r\n    date: $('#pfxDate'),\r\n    dateControls: $('#pfxDateControls'),\r\n    accent: $('#pfxAccent'),\r\n    showDate: $('#pfxShowDate'),\r\n    shuffle: $('#pfxShuffle'),\r\n    download: $('#pfxDownload'),\r\n    reset: $('#pfxReset'),\r\n    notice: $('#pfxNotice')\r\n  };\r\n\r\n  const templates = {\r\n    story: {\r\n      label: 'Portrait Story', max: 5, accent: '#c9655d',\r\n      eyebrow: 'A BEAUTIFUL MEMORY', title: 'My Story',\r\n      message: 'Every picture tells a part of your beautiful story.',\r\n      needsDate: false\r\n    },\r\n    kids: {\r\n      label: 'Kids Birthday', max: 4, accent: '#f05b78',\r\n      eyebrow: 'OUR CUTE LITTLE PRINCESS', title: 'YOUR NAME',\r\n      message: 'May your day be filled with giggles, colour and wonderful surprises.',\r\n      needsDate: false\r\n    },\r\n    love: {\r\n      label: 'Love Photo Ring', max: 10, accent: '#e6323e',\r\n      eyebrow: 'OUR FAVOURITE MOMENTS', title: 'I Love You',\r\n      message: 'You are the sun of my life and the home of my heart. Every memory is more beautiful with you.',\r\n      needsDate: false\r\n    },\r\n    calendar: {\r\n      label: 'Birthday Calendar', max: 5, accent: '#c85a4d',\r\n      eyebrow: 'YOUR NAME', title: 'Happy Birthday',\r\n      message: 'Wishing you a year full of happiness, good health and unforgettable moments.',\r\n      needsDate: true\r\n    }\r\n  };\r\n\r\n  const state = {\r\n    template: 'story',\r\n    images: [],\r\n    seed: Math.random(),\r\n    downloading: false\r\n  };\r\n\r\n  function safeText(value, fallback){\r\n    const text = String(value || '').trim();\r\n    return text || fallback;\r\n  }\r\n\r\n  function hexToRgb(hex){\r\n    const clean = String(hex).replace('#','');\r\n    const full = clean.length === 3 ? clean.split('').map(c => c + c).join('') : clean;\r\n    const n = parseInt(full,16);\r\n    return { r:(n>>16)&255, g:(n>>8)&255, b:n&255 };\r\n  }\r\n\r\n  function rgba(hex, alpha){\r\n    const c = hexToRgb(hex);\r\n    return `rgba(${c.r},${c.g},${c.b},${alpha})`;\r\n  }\r\n\r\n  function roundRect(x,y,w,h,r){\r\n    const radius = Math.min(r,w\/2,h\/2);\r\n    ctx.beginPath();\r\n    ctx.moveTo(x+radius,y);\r\n    ctx.arcTo(x+w,y,x+w,y+h,radius);\r\n    ctx.arcTo(x+w,y+h,x,y+h,radius);\r\n    ctx.arcTo(x,y+h,x,y,radius);\r\n    ctx.arcTo(x,y,x+w,y,radius);\r\n    ctx.closePath();\r\n  }\r\n\r\n  function fillRound(x,y,w,h,r,fill){\r\n    ctx.save();\r\n    ctx.fillStyle = fill;\r\n    roundRect(x,y,w,h,r);\r\n    ctx.fill();\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawCover(img,x,y,w,h,radius=0){\r\n    if (!img) {\r\n      fillRound(x,y,w,h,radius,'#ddd7d1');\r\n      ctx.save();\r\n      ctx.fillStyle='rgba(0,0,0,.28)';\r\n      ctx.textAlign='center';\r\n      ctx.textBaseline='middle';\r\n      ctx.font='700 24px Arial';\r\n      ctx.fillText('PHOTO',x+w\/2,y+h\/2);\r\n      ctx.restore();\r\n      return;\r\n    }\r\n    const iw=img.naturalWidth || img.width;\r\n    const ih=img.naturalHeight || img.height;\r\n    const ir=iw\/ih, br=w\/h;\r\n    let sx=0,sy=0,sw=iw,sh=ih;\r\n    if(ir>br){sw=ih*br;sx=(iw-sw)\/2;}else{sh=iw\/br;sy=(ih-sh)\/2;}\r\n    ctx.save();\r\n    if(radius){roundRect(x,y,w,h,radius);ctx.clip();}\r\n    ctx.drawImage(img,sx,sy,sw,sh,x,y,w,h);\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawContain(img,x,y,w,h){\r\n    if(!img){drawCover(null,x,y,w,h,10);return;}\r\n    const iw=img.naturalWidth||img.width, ih=img.naturalHeight||img.height;\r\n    const scale=Math.min(w\/iw,h\/ih);\r\n    const dw=iw*scale, dh=ih*scale;\r\n    ctx.drawImage(img,x+(w-dw)\/2,y+(h-dh)\/2,dw,dh);\r\n  }\r\n\r\n  function drawTextBlock(text,x,y,maxWidth,lineHeight,maxLines,align='left'){\r\n    ctx.textAlign=align;\r\n    const words=String(text).split(\/\\s+\/).filter(Boolean);\r\n    const lines=[];\r\n    let line='';\r\n    words.forEach(word=>{\r\n      const test=line?line+' '+word:word;\r\n      if(ctx.measureText(test).width>maxWidth && line){lines.push(line);line=word;}else{line=test;}\r\n    });\r\n    if(line) lines.push(line);\r\n    const visible=lines.slice(0,maxLines);\r\n    if(lines.length>maxLines && visible.length){\r\n      let last=visible[visible.length-1];\r\n      while(last.length && ctx.measureText(last+'\u00e2\u20ac\u00a6').width>maxWidth) last=last.slice(0,-1);\r\n      visible[visible.length-1]=last+'\u00e2\u20ac\u00a6';\r\n    }\r\n    visible.forEach((ln,i)=>ctx.fillText(ln,x,y+i*lineHeight));\r\n    return visible.length*lineHeight;\r\n  }\r\n\r\n  function drawPolaroid(img,x,y,w,h,rotation,accent){\r\n    ctx.save();\r\n    ctx.translate(x+w\/2,y+h\/2);\r\n    ctx.rotate(rotation*Math.PI\/180);\r\n    ctx.shadowColor='rgba(0,0,0,.32)';\r\n    ctx.shadowBlur=18;\r\n    ctx.shadowOffsetY=10;\r\n    fillRound(-w\/2,-h\/2,w,h,4,'#fffdf8');\r\n    ctx.shadowColor='transparent';\r\n    drawCover(img,-w\/2+12,-h\/2+12,w-24,h-46,2);\r\n    ctx.fillStyle=accent;\r\n    ctx.globalAlpha=.65;\r\n    ctx.fillRect(-w\/2+13,h\/2-25,w-26,2);\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawFrameEdge(){\r\n    const grad=ctx.createLinearGradient(0,0,1200,1500);\r\n    grad.addColorStop(0,'#080808');grad.addColorStop(.22,'#3b3330');grad.addColorStop(.5,'#080808');grad.addColorStop(.77,'#453a35');grad.addColorStop(1,'#070707');\r\n    ctx.fillStyle=grad;ctx.fillRect(0,0,1200,1500);\r\n    fillRound(52,52,1096,1396,12,'#0e0e0e');\r\n    ctx.save();ctx.strokeStyle='rgba(255,255,255,.10)';ctx.lineWidth=3;ctx.strokeRect(25,25,1150,1450);ctx.restore();\r\n  }\r\n\r\n  function drawDateStamp(x,y,color,align='right'){\r\n    if(!els.showDate.checked) return;\r\n    const date=els.date.value ? new Date(els.date.value+'T12:00:00') : new Date();\r\n    const label=date.toLocaleDateString(undefined,{day:'2-digit',month:'short',year:'numeric'}).toUpperCase();\r\n    ctx.save();ctx.textAlign=align;ctx.fillStyle=color;ctx.font='700 22px monospace';ctx.fillText(label,x,y);ctx.restore();\r\n  }\r\n\r\n  function shuffledImages(){\r\n    const arr=state.images.slice();\r\n    let seed=Math.floor(state.seed*100000)+1;\r\n    for(let i=arr.length-1;i>0;i--){\r\n      seed=(seed*9301+49297)%233280;\r\n      const j=Math.floor((seed\/233280)*(i+1));\r\n      [arr[i],arr[j]]=[arr[j],arr[i]];\r\n    }\r\n    return arr;\r\n  }\r\n\r\n  function drawStory(images,accent){\r\n    drawFrameEdge();\r\n    const bg=ctx.createLinearGradient(90,90,1110,1410);\r\n    bg.addColorStop(0,'#fffaf4');bg.addColorStop(1,'#ead8ca');\r\n    fillRound(92,92,1016,1316,4,bg);\r\n\r\n    ctx.save();\r\n    ctx.fillStyle=rgba(accent,.10);ctx.beginPath();ctx.arc(175,1260,190,0,Math.PI*2);ctx.fill();\r\n    ctx.fillStyle=rgba(accent,.16);ctx.beginPath();ctx.arc(1050,1170,150,0,Math.PI*2);ctx.fill();\r\n    ctx.restore();\r\n\r\n    const slots=[\r\n      {x:150,y:255,w:205,h:565},{x:365,y:220,w:205,h:600},\r\n      {x:580,y:270,w:205,h:550},{x:795,y:235,w:205,h:585}\r\n    ];\r\n    slots.forEach((s,i)=>{\r\n      ctx.save();ctx.shadowColor='rgba(0,0,0,.18)';ctx.shadowBlur=18;ctx.shadowOffsetY=9;\r\n      fillRound(s.x-7,s.y-7,s.w+14,s.h+14,3,'#fff');ctx.restore();\r\n      drawCover(images[i+1],s.x,s.y,s.w,s.h,2);\r\n    });\r\n\r\n    ctx.save();\r\n    ctx.shadowColor='rgba(0,0,0,.34)';ctx.shadowBlur=28;ctx.shadowOffsetY=16;\r\n    fillRound(350,610,500,650,28,'#f7efe8');\r\n    ctx.restore();\r\n    drawCover(images[0],365,625,470,620,20);\r\n    ctx.save();ctx.strokeStyle=rgba(accent,.65);ctx.lineWidth=7;roundRect(365,625,470,620,20);ctx.stroke();ctx.restore();\r\n\r\n    ctx.textAlign='center';ctx.fillStyle='#6f554d';ctx.font='800 21px Arial';ctx.fillText(safeText(els.eyebrow.value,'A BEAUTIFUL MEMORY'),600,165);\r\n    ctx.fillStyle='#2b2421';ctx.font='italic 800 66px Georgia';ctx.fillText(safeText(els.title.value,'My Story'),600,1320);\r\n    ctx.fillStyle='#66564f';ctx.font='400 24px Arial';drawTextBlock(safeText(els.message.value,''),600,1360,780,31,2,'center');\r\n    drawDateStamp(1030,1368,accent,'right');\r\n  }\r\n\r\n  function drawKids(images,accent){\r\n    drawFrameEdge();\r\n    const bg=ctx.createLinearGradient(92,92,92,1408);\r\n    bg.addColorStop(0,'#ff9fc0');\r\n    bg.addColorStop(.36,'#ffca76');\r\n    bg.addColorStop(.68,'#8de0ff');\r\n    bg.addColorStop(1,'#8ddfbb');\r\n    fillRound(92,92,1016,1316,5,bg);\r\n\r\n    ctx.save();\r\n    const glow=ctx.createRadialGradient(610,340,20,610,340,370);\r\n    glow.addColorStop(0,'rgba(255,255,255,.95)');\r\n    glow.addColorStop(.32,'rgba(255,251,210,.55)');\r\n    glow.addColorStop(1,'rgba(255,255,255,0)');\r\n    ctx.fillStyle=glow;ctx.fillRect(140,90,920,620);\r\n    ctx.restore();\r\n\r\n    ctx.save();\r\n    ctx.strokeStyle='rgba(255,255,255,.35)';ctx.lineWidth=10;\r\n    for(let i=0;i<7;i++){\r\n      ctx.beginPath();\r\n      ctx.moveTo(120+i*150,130);\r\n      ctx.quadraticCurveTo(170+i*150,200,230+i*150,140);\r\n      ctx.stroke();\r\n    }\r\n    ctx.restore();\r\n\r\n    ['#ff5f7c','#ffd65c','#5ed1ff','#7cdb8c','#b889ff','#ff8f55'].forEach((c,i)=>{\r\n      const x=145+i*150;\r\n      ctx.fillStyle=c;ctx.beginPath();ctx.moveTo(x,138);ctx.lineTo(x+24,180);ctx.lineTo(x+48,138);ctx.closePath();ctx.fill();\r\n    });\r\n\r\n    const balloons=[\r\n      {x:210,y:250,r:44,c:'#ff6f91'},{x:265,y:205,r:36,c:'#69d3ff'},{x:980,y:250,r:44,c:'#ffd45f'},{x:925,y:205,r:36,c:'#8de0b3'}\r\n    ];\r\n    balloons.forEach(b=>{\r\n      ctx.save();ctx.shadowColor='rgba(0,0,0,.15)';ctx.shadowBlur=18;\r\n      const g=ctx.createRadialGradient(b.x-10,b.y-14,4,b.x,b.y,b.r);\r\n      g.addColorStop(0,'rgba(255,255,255,.95)');g.addColorStop(.18,'rgba(255,255,255,.65)');g.addColorStop(.2,b.c);g.addColorStop(1,b.c);\r\n      ctx.fillStyle=g;ctx.beginPath();ctx.arc(b.x,b.y,b.r,0,Math.PI*2);ctx.fill();\r\n      ctx.restore();\r\n      ctx.strokeStyle='rgba(255,255,255,.55)';ctx.lineWidth=3;ctx.beginPath();ctx.moveTo(b.x,b.y+b.r);ctx.quadraticCurveTo(b.x+(b.x<600?18:-18),b.y+b.r+45,b.x+(b.x<600?4:-4),b.y+b.r+95);ctx.stroke();\r\n    });\r\n\r\n    ctx.save();\r\n    ctx.globalAlpha=.95;\r\n    const rainbow=[\r\n      {c:'rgba(255,106,140,.85)',w:26},{c:'rgba(255,199,87,.85)',w:24},{c:'rgba(100,211,255,.85)',w:22},{c:'rgba(123,219,156,.85)',w:20}\r\n    ];\r\n    rainbow.forEach((band,i)=>{\r\n      ctx.strokeStyle=band.c;ctx.lineWidth=band.w;ctx.beginPath();ctx.arc(600,960,275-i*30,Math.PI*1.05,Math.PI*1.95);ctx.stroke();\r\n    });\r\n    ctx.restore();\r\n\r\n    for(let i=0;i<80;i++){\r\n      const x=125+((i*97)%945), y=170+((i*157)%1110), s=9+(i%4)*3;\r\n      ctx.save();ctx.translate(x,y);ctx.rotate((i%10)*0.25);\r\n      ctx.fillStyle=['#fff','#ff6f91','#5ed1ff','#ffe36e','#7cdb8c','#c9a1ff'][i%6];\r\n      if(i%3===0){ctx.fillRect(-s\/2,-s\/2,s,5);}else{ctx.beginPath();ctx.arc(0,0,s\/2,0,Math.PI*2);ctx.fill();ctx.restore();continue;}\r\n      ctx.restore();\r\n    }\r\n\r\n    ctx.save();ctx.shadowColor=rgba(accent,.4);ctx.shadowBlur=55;ctx.fillStyle='rgba(255,255,255,.18)';ctx.beginPath();ctx.ellipse(600,710,375,500,0,0,Math.PI*2);ctx.fill();ctx.restore();\r\n\r\n    const bubbles=[\r\n      {x:170,y:360,r:125,img:images[1]},{x:930,y:350,r:118,img:images[2]},{x:935,y:1040,r:112,img:images[3]}\r\n    ];\r\n    bubbles.forEach(b=>{\r\n      ctx.save();ctx.shadowColor='rgba(0,0,0,.18)';ctx.shadowBlur=22;ctx.beginPath();ctx.arc(b.x,b.y,b.r+12,0,Math.PI*2);ctx.fillStyle='rgba(255,255,255,.95)';ctx.fill();ctx.restore();\r\n      ctx.save();ctx.beginPath();ctx.arc(b.x,b.y,b.r,0,Math.PI*2);ctx.clip();drawCover(b.img,b.x-b.r,b.y-b.r,b.r*2,b.r*2,0);ctx.restore();\r\n      ctx.save();ctx.strokeStyle='rgba(255,255,255,.9)';ctx.lineWidth=10;ctx.beginPath();ctx.arc(b.x,b.y,b.r+4,0,Math.PI*2);ctx.stroke();ctx.restore();\r\n      ctx.save();ctx.strokeStyle=accent;ctx.lineWidth=4;ctx.beginPath();ctx.arc(b.x,b.y,b.r+14,0,Math.PI*2);ctx.stroke();ctx.restore();\r\n    });\r\n\r\n    ctx.save();ctx.shadowColor='rgba(0,0,0,.28)';ctx.shadowBlur=34;ctx.beginPath();ctx.arc(600,710,315,0,Math.PI*2);ctx.fillStyle='#fff';ctx.fill();ctx.restore();\r\n    ctx.save();ctx.beginPath();ctx.arc(600,710,295,0,Math.PI*2);ctx.clip();drawCover(images[0],305,415,590,590);ctx.restore();\r\n    ctx.save();ctx.strokeStyle='#fff';ctx.lineWidth=18;ctx.beginPath();ctx.arc(600,710,300,0,Math.PI*2);ctx.stroke();ctx.restore();\r\n    ctx.save();ctx.strokeStyle=accent;ctx.lineWidth=8;ctx.beginPath();ctx.arc(600,710,313,0,Math.PI*2);ctx.stroke();ctx.restore();\r\n\r\n    ['#65c9e7','#f7d44a','#ef6b85','#7bd39c','#b889ff'].forEach((c,i)=>{\r\n      ctx.fillStyle=c;ctx.beginPath();ctx.arc(340+i*130,1110+(i%2)*24,23+(i%3)*5,0,Math.PI*2);ctx.fill();\r\n      ctx.fillStyle='rgba(255,255,255,.45)';ctx.beginPath();ctx.arc(332+i*130,1100+(i%2)*24,7,0,Math.PI*2);ctx.fill();\r\n    });\r\n\r\n    ctx.textAlign='center';ctx.fillStyle='#fff7d1';ctx.font='700 22px Georgia';ctx.fillText(safeText(els.eyebrow.value,'OUR CUTE LITTLE PRINCESS'),600,170);\r\n    ctx.fillStyle='#fff';ctx.font='800 44px Arial';ctx.fillText('HAPPY BIRTHDAY',600,1218);\r\n    ctx.fillStyle=accent;ctx.font='900 76px Arial';ctx.fillText(safeText(els.title.value,'YOUR NAME').toUpperCase(),600,1295);\r\n    ctx.fillStyle='#fff';ctx.font='400 21px Arial';drawTextBlock(safeText(els.message.value,''),600,1340,760,27,2,'center');\r\n    drawDateStamp(1030,1368,'#fff7d1','right');\r\n  }\r\n\r\n  function drawLove(images,accent){\r\n    drawFrameEdge();\r\n    const inner=ctx.createRadialGradient(600,720,60,600,720,720);\r\n    inner.addColorStop(0,'#242020');inner.addColorStop(.65,'#0e0d0d');inner.addColorStop(1,'#050505');\r\n    fillRound(92,92,1016,1316,4,inner);\r\n\r\n    const cx=600,cy=720,rx=420,ry=500;\r\n    const rotations=[-12,-3,9,11,5,-8,-12,-5,6,12];\r\n    images.slice(0,10).forEach((img,i)=>{\r\n      const a=(-Math.PI\/2)+(i\/10)*Math.PI*2;\r\n      const x=cx+Math.cos(a)*rx-92;\r\n      const y=cy+Math.sin(a)*ry-115;\r\n      drawPolaroid(img,x,y,184,230,rotations[i],accent);\r\n    });\r\n    for(let i=images.length;i<10;i++){\r\n      const a=(-Math.PI\/2)+(i\/10)*Math.PI*2;\r\n      const x=cx+Math.cos(a)*rx-92;\r\n      const y=cy+Math.sin(a)*ry-115;\r\n      drawPolaroid(null,x,y,184,230,rotations[i],accent);\r\n    }\r\n\r\n    ctx.textAlign='center';ctx.fillStyle='#fff';ctx.font='italic 800 70px Georgia';ctx.fillText(safeText(els.title.value,'I Love You'),600,625);\r\n    ctx.fillStyle=accent;ctx.font='900 52px Arial';ctx.fillText('\u00e2\u2122\u00a5',600,690);\r\n    ctx.fillStyle='#f7eeee';ctx.font='italic 400 28px Georgia';drawTextBlock(safeText(els.message.value,''),600,755,480,39,7,'center');\r\n    ctx.fillStyle=rgba(accent,.9);ctx.font='700 18px Arial';ctx.fillText(safeText(els.eyebrow.value,'OUR FAVOURITE MOMENTS'),600,1010);\r\n    drawDateStamp(600,1050,'#fff','center');\r\n  }\r\n\r\n  function monthMatrix(date){\r\n    const year=date.getFullYear(),month=date.getMonth();\r\n    const first=(new Date(year,month,1).getDay()+6)%7;\r\n    const days=new Date(year,month+1,0).getDate();\r\n    const cells=[];\r\n    for(let i=0;i<first;i++)cells.push(null);\r\n    for(let d=1;d<=days;d++)cells.push(d);\r\n    while(cells.length<42)cells.push(null);\r\n    return {year,month,cells};\r\n  }\r\n\r\n  function drawCalendar(images,accent){\r\n    drawFrameEdge();\r\n    const bg=ctx.createLinearGradient(95,90,1100,1400);\r\n    bg.addColorStop(0,'#3a2b26');bg.addColorStop(.5,'#160f0f');bg.addColorStop(1,'#080707');\r\n    fillRound(92,92,1016,1316,5,bg);\r\n\r\n    ctx.save();ctx.globalAlpha=.25;for(let i=0;i<25;i++){ctx.fillStyle=i%2?accent:'#fff';ctx.beginPath();ctx.arc(120+(i*97)%950,120+(i*173)%1250,2+(i%4),0,Math.PI*2);ctx.fill();}ctx.restore();\r\n\r\n    const mainX=550,mainY=180,mainW=500,mainH=820;\r\n    ctx.save();ctx.shadowColor='rgba(0,0,0,.5)';ctx.shadowBlur=32;ctx.shadowOffsetY=15;fillRound(mainX-10,mainY-10,mainW+20,mainH+20,12,'#efe6dc');ctx.restore();\r\n    drawCover(images[0],mainX,mainY,mainW,mainH,8);\r\n    const small=[{x:150,y:170,w:260,h:205},{x:120,y:410,w:290,h:205},{x:155,y:650,w:255,h:205},{x:125,y:890,w:285,h:205}];\r\n    small.forEach((s,i)=>drawPolaroid(images[i+1],s.x,s.y,s.w,s.h,(i%2?2:-2),accent));\r\n\r\n    ctx.fillStyle='rgba(0,0,0,.62)';ctx.fillRect(520,820,560,230);\r\n    ctx.textAlign='right';ctx.fillStyle='#fff';ctx.font='italic 700 54px Georgia';ctx.fillText(safeText(els.title.value,'Happy Birthday'),1030,900);\r\n    ctx.fillStyle=accent;ctx.font='italic 800 72px Georgia';ctx.fillText(safeText(els.eyebrow.value,'YOUR NAME'),1030,970);\r\n\r\n    const selected=els.date.value?new Date(els.date.value+'T12:00:00'):new Date();\r\n    const data=monthMatrix(selected);\r\n    const monthName=selected.toLocaleDateString(undefined,{month:'long'}).toUpperCase();\r\n    const calX=130,calY=1120,calW=580;\r\n    ctx.textAlign='left';ctx.fillStyle='#fff';ctx.font='800 31px Arial';ctx.fillText(monthName,calX,calY);\r\n    ctx.fillStyle=accent;ctx.font='700 18px Arial';ctx.fillText(String(data.year),calX+205,calY-1);\r\n    const days=['MON','TUE','WED','THU','FRI','SAT','SUN'];\r\n    ctx.font='700 13px Arial';ctx.fillStyle='#c6b8b2';days.forEach((d,i)=>ctx.fillText(d,calX+i*(calW\/7),calY+42));\r\n    data.cells.forEach((d,i)=>{\r\n      if(!d)return;\r\n      const col=i%7,row=Math.floor(i\/7),x=calX+col*(calW\/7)+13,y=calY+79+row*43;\r\n      if(d===selected.getDate()){\r\n        ctx.fillStyle=accent;ctx.beginPath();ctx.arc(x,y-6,17,0,Math.PI*2);ctx.fill();ctx.fillStyle='#fff';\r\n      }else ctx.fillStyle='#eee4de';\r\n      ctx.textAlign='center';ctx.font='700 15px Arial';ctx.fillText(String(d),x,y-1);\r\n    });\r\n\r\n    ctx.textAlign='left';ctx.fillStyle='#eaded8';ctx.font='400 20px Arial';drawTextBlock(safeText(els.message.value,''),760,1150,300,29,7,'left');\r\n    drawDateStamp(1030,1370,accent,'right');\r\n  }\r\n\r\n  function render(){\r\n    const accent=els.accent.value || templates[state.template].accent;\r\n    root.style.setProperty('--pf-accent',accent);\r\n    ctx.clearRect(0,0,canvas.width,canvas.height);\r\n    const images=shuffledImages();\r\n    if(state.template==='story')drawStory(images,accent);\r\n    else if(state.template==='kids')drawKids(images,accent);\r\n    else if(state.template==='love')drawLove(images,accent);\r\n    else drawCalendar(images,accent);\r\n  }\r\n\r\n  function updateThumbs(){\r\n    els.thumbs.innerHTML='';\r\n    state.images.forEach((img,index)=>{\r\n      const item=document.createElement('div');item.className='pf-thumb';\r\n      const preview=document.createElement('img');preview.src=img.src;preview.alt=`Uploaded photo ${index+1}`;\r\n      const badge=document.createElement('span');badge.textContent=index+1;\r\n      item.append(preview,badge);els.thumbs.appendChild(item);\r\n    });\r\n  }\r\n\r\n  function updateUploadUI(message){\r\n    const max=templates[state.template].max;\r\n    els.uploadTitle.textContent=`Upload up to ${max} photo${max===1?'':'s'}`;\r\n    els.counter.textContent=`${state.images.length} \/ ${max}`;\r\n    els.status.textContent=message || (state.images.length?`${state.images.length} photo${state.images.length===1?'':'s'} ready`:'No photos selected');\r\n    els.download.disabled=!state.images.length || state.downloading;\r\n    updateThumbs();\r\n  }\r\n\r\n  function loadImage(file){\r\n    return new Promise((resolve,reject)=>{\r\n      if(file.size>12*1024*1024){reject(new Error(`${file.name} is larger than 12 MB.`));return;}\r\n      const url=URL.createObjectURL(file);\r\n      const img=new Image();\r\n      img.onload=()=>{img._pfObjectUrl=url;resolve(img);};\r\n      img.onerror=()=>{URL.revokeObjectURL(url);reject(new Error(`${file.name} could not be opened.`));};\r\n      img.src=url;\r\n    });\r\n  }\r\n\r\n  function releaseImage(img){\r\n    try{if(img && img._pfObjectUrl) URL.revokeObjectURL(img._pfObjectUrl);}catch(e){}\r\n    try{if(img) img.src='';}catch(e){}\r\n  }\r\n\r\n  function clearImages(){\r\n    state.images.forEach(releaseImage);\r\n    state.images=[];\r\n    els.files.value='';\r\n    updateUploadUI();\r\n  }\r\n\r\n  function applyTemplate(name,resetText=true){\r\n    state.template=name;\r\n    const t=templates[name];\r\n    $$('.pf-template').forEach(button=>{\r\n      const active=button.dataset.template===name;\r\n      button.classList.toggle('is-active',active);\r\n      button.setAttribute('aria-pressed',active?'true':'false');\r\n    });\r\n    els.dateControls.hidden=!t.needsDate;\r\n    els.accent.value=t.accent;\r\n    if(resetText){els.eyebrow.value=t.eyebrow;els.title.value=t.title;els.message.value=t.message;}\r\n    if(state.images.length>t.max){\r\n      state.images.slice(t.max).forEach(releaseImage);\r\n      state.images=state.images.slice(0,t.max);\r\n    }\r\n    updateUploadUI();render();\r\n  }\r\n\r\n  root.addEventListener('click',event=>{\r\n    const button=event.target.closest('.pf-template[data-template]');\r\n    if(!button || !root.contains(button)) return;\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    const name=button.dataset.template;\r\n    if(!templates[name]) return;\r\n    applyTemplate(name,true);\r\n  });\r\n\r\n  els.files.addEventListener('change',async event=>{\r\n    const max=templates[state.template].max;\r\n    const incoming=Array.from(event.target.files||[]);\r\n    if(!incoming.length)return;\r\n    const accepted=incoming.slice(0,max);\r\n    els.notice.textContent='';\r\n    updateUploadUI('Preparing photos\u00e2\u20ac\u00a6');\r\n    try{\r\n      const loaded=await Promise.all(accepted.map(loadImage));\r\n      state.images.forEach(releaseImage);\r\n      state.images=loaded;\r\n      state.seed=Math.random();\r\n      if(incoming.length>max){els.notice.textContent=`This frame uses ${max} photos, so only the first ${max} were added.`;els.notice.style.color='#a15b00';}\r\n      updateUploadUI();render();\r\n    }catch(error){\r\n      clearImages();els.notice.textContent=error.message;els.notice.style.color='#b42318';render();\r\n    }\r\n  });\r\n\r\n  [els.eyebrow,els.title,els.message].forEach(el=>el.addEventListener('input',render));\r\n  [els.date,els.accent,els.showDate].forEach(el=>el.addEventListener('change',render));\r\n\r\n  els.shuffle.addEventListener('click',()=>{state.seed=Math.random();render();});\r\n\r\n  els.reset.addEventListener('click',()=>{\r\n    clearImages();\r\n    state.seed=Math.random();\r\n    applyTemplate(state.template,true);\r\n    els.notice.textContent='All photos and custom text have been cleared.';\r\n    els.notice.style.color='#386a46';\r\n  });\r\n\r\n  els.download.addEventListener('click',()=>{\r\n    if(!state.images.length || state.downloading)return;\r\n    state.downloading=true;updateUploadUI('Creating your PNG\u00e2\u20ac\u00a6');render();\r\n    canvas.toBlob(blob=>{\r\n      if(!blob){state.downloading=false;updateUploadUI();els.notice.textContent='The download could not be created.';els.notice.style.color='#b42318';return;}\r\n      const url=URL.createObjectURL(blob);\r\n      const link=document.createElement('a');\r\n      link.href=url;\r\n      link.download=`${state.template}-photo-frame-${Date.now()}.png`;\r\n      document.body.appendChild(link);link.click();link.remove();\r\n      setTimeout(()=>{\r\n        URL.revokeObjectURL(url);\r\n        state.downloading=false;\r\n        clearImages();\r\n        els.notice.textContent='Downloaded successfully. Uploaded photos were cleared from browser memory.';\r\n        els.notice.style.color='#267044';\r\n        render();\r\n      },900);\r\n    },'image\/png',1);\r\n  });\r\n\r\n  if(!els.date.value){\r\n    const now=new Date();\r\n    const local=new Date(now.getTime()-now.getTimezoneOffset()*60000).toISOString().slice(0,10);\r\n    els.date.value=local;\r\n  }\r\n  applyTemplate('story',true);\r\n})();\r\n<\/script>\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-8eaad48 e-flex e-con-boxed e-con e-parent\" data-id=\"8eaad48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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-fb36baf e-flex e-con-boxed e-con e-parent\" data-id=\"fb36baf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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-3541d2e e-con-full e-flex e-con e-parent\" data-id=\"3541d2e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c54679b elementor-widget elementor-widget-html\" data-id=\"c54679b\" 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=\"position: relative; width: 100%; padding-bottom: 66.67%;\">\r\n  <iframe src=\"https:\/\/www.gameflare.com\/embed\/racing-go\/\" \r\n          style=\"position: absolute; top:0; left:0; width:100%; height:100%;\"\r\n          frameborder=\"0\" scrolling=\"no\" allowfullscreen><\/iframe>\r\n<\/div>\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-381d159 e-con-full e-flex e-con e-parent\" data-id=\"381d159\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Upload Your Image For 3d Tilt Animation \ud83d\udc47 Move your mouse fast over this Black Space! Upload up to 14 images to see your animation! PERSONALISED FRAME STUDIO Create Your Photo Frame Choose a design, upload your own photographs, customise the wording, and download a print-ready PNG. 1. Choose a frame Portrait Story 5 photos [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4839","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/comments?post=4839"}],"version-history":[{"count":31,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839\/revisions"}],"predecessor-version":[{"id":5407,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4839\/revisions\/5407"}],"wp:attachment":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/media?parent=4839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}