{"id":7689,"date":"2024-12-18T07:36:17","date_gmt":"2024-12-18T07:36:17","guid":{"rendered":"https:\/\/pawdy.co.th\/?page_id=7689"},"modified":"2026-07-16T07:50:00","modified_gmt":"2026-07-16T07:50:00","slug":"page-for-test","status":"publish","type":"page","link":"https:\/\/pawdy.co.th\/en\/page-for-test\/","title":{"rendered":"Page for test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7689\" class=\"elementor elementor-7689\" wpc-filter-elementor-widget=\"1\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f83260 e-flex e-con-boxed e-con e-parent\" data-id=\"0f83260\" 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-3b630ec elementor-widget elementor-widget-html\" data-id=\"3b630ec\" 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<!-- =====================================================================\r\n   PART 1\/2 \u2014 DOG PROFILE CARD (\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 + Preview Canvas + Consent)\r\n   \u0e27\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e19\u0e35\u0e49\u0e43\u0e19 Elementor Pro > HTML Element \u0e15\u0e31\u0e27\u0e17\u0e35\u0e48 1\r\n   \u2605 \u0e15\u0e49\u0e2d\u0e07\u0e27\u0e32\u0e07 Element \u0e19\u0e35\u0e49\u0e44\u0e27\u0e49 \"\u0e40\u0e2b\u0e19\u0e37\u0e2d\" Element \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48 2 (Campaign Progress Bar)\r\n     \u0e40\u0e2a\u0e21\u0e2d \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e2a\u0e04\u0e23\u0e34\u0e1b\u0e15\u0e4c\u0e02\u0e2d\u0e07 Part 2 \u0e08\u0e30\u0e14\u0e36\u0e07\u0e04\u0e48\u0e32\u0e08\u0e32\u0e01 #ecm-age \u0e43\u0e19\u0e44\u0e1f\u0e25\u0e4c\u0e19\u0e35\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u2605\r\n\r\n   \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07:\r\n     .ecm-wrap (flex \u0e0b\u0e49\u0e32\u0e22-\u0e02\u0e27\u0e32)\r\n       \u251c\u2500 .ecm-left  = \u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (\u0e0a\u0e37\u0e48\u0e2d\/\u0e2d\u0e32\u0e22\u0e38\/\u0e19\u0e34\u0e2a\u0e31\u0e22 + \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b)\r\n       \u2514\u2500 .ecm-right = Preview (canvas) + checkbox \u0e22\u0e34\u0e19\u0e22\u0e2d\u0e21 + \u0e1b\u0e38\u0e48\u0e21\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 PNG\r\n                        + remark \u0e2a\u0e48\u0e07\u0e23\u0e39\u0e1b LINE\r\n\r\n   \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38: \u0e1b\u0e38\u0e48\u0e21 \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e20\u0e32\u0e1e\" \u0e08\u0e30\u0e01\u0e14\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49 (disabled) \u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e15\u0e34\u0e4a\u0e01\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\r\n   \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e48\u0e2d\u0e19 \u2014 \u0e40\u0e0a\u0e47\u0e01\u0e0b\u0e49\u0e33\u0e2d\u0e35\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e43\u0e19\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19 ecmSave() \u0e01\u0e31\u0e19\u0e01\u0e23\u0e13\u0e35\u0e21\u0e35\u0e04\u0e19\u0e1b\u0e25\u0e14\r\n   disabled \u0e1c\u0e48\u0e32\u0e19 DevTools \u0e14\u0e49\u0e27\u0e22\r\n   ===================================================================== -->\r\n<style>\r\n  .ecm-wrap {\r\n    display:flex;gap:0;min-height:620px;\r\n    font-family:inherit;\r\n    background:#fff;border:1px solid #e5e5e5;border-radius:14px;overflow:hidden;\r\n  }\r\n  .ecm-left{flex:1;padding:1.25rem;border-right:1px solid #e8e8e8;overflow-y:auto;}\r\n  .ecm-right{flex:1;padding:1.25rem;display:flex;flex-direction:column;}\r\n  .ecm-panel-title{font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:.875rem;display:flex;align-items:center;gap:6px;}\r\n  .ecm-label{display:block;font-size:12px;color:#666;margin-bottom:4px;font-weight:500;letter-spacing:.02em;}\r\n  .ecm-section{margin-bottom:1.1rem;}\r\n  .ecm-divider{border:none;border-top:1px solid #eee;margin:1rem 0;}\r\n\r\n  .ecm-input,.ecm-textarea{width:100%;font-size:14px;padding:9px 11px;border:1px solid #ddd;border-radius:8px;background:#fafafa;color:#1a1a1a;font-family:inherit;line-height:1.6;transition:border-color .15s;box-sizing:border-box;}\r\n  .ecm-input:focus,.ecm-textarea:focus{outline:none;border-color:#9ACA3C;background:#fff;}\r\n  .ecm-textarea{resize:vertical;min-height:70px;}\r\n\r\n  .ecm-charcount{display:block;text-align:right;font-size:11px;color:#aaa;margin-top:3px;}\r\n  .ecm-charcount.ecm-charcount-limit{color:#e53e3e;font-weight:600;}\r\n\r\n  .ecm-upload{border:1.5px dashed #ccc;border-radius:10px;padding:1.1rem;text-align:center;cursor:pointer;background:#f7f7f7;transition:background .15s,border-color .15s;}\r\n  .ecm-upload:hover{background:#f0f0f0;border-color:#aaa;}\r\n  .ecm-upload-icon{font-size:26px;color:#aaa;display:block;margin-bottom:5px;}\r\n  .ecm-upload p{font-size:13px;color:#888;margin:0;}\r\n  .ecm-upload p.ecm-sub{font-size:11px;margin-top:3px;color:#bbb;}\r\n  #ecm-file-input{display:none;}\r\n\r\n  .ecm-thumb-wrap{display:none;margin-top:.6rem;position:relative;text-align:center;}\r\n  .ecm-thumb-wrap img{max-width:100%;max-height:80px;border-radius:8px;object-fit:cover;display:block;margin:0 auto;}\r\n  .ecm-remove-btn{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:background .15s;}\r\n  .ecm-remove-btn:hover{background:#e53e3e;}\r\n\r\n  .ecm-img-controls{display:none;margin-top:.65rem;padding:.7rem;background:#f7f7f7;border:1px solid #e8e8e8;border-radius:10px;flex-direction:column;gap:7px;}\r\n  .ecm-img-controls.visible{display:flex;}\r\n  .ecm-img-hint{font-size:11px;color:#999;display:flex;align-items:center;gap:4px;}\r\n  .ecm-reset-btn{align-self:flex-end;font-size:11px;color:#666;background:none;border:1px solid #ddd;border-radius:6px;padding:3px 9px;cursor:pointer;font-family:inherit;transition:background .15s;}\r\n  .ecm-reset-btn:hover{background:#eee;}\r\n\r\n  .ecm-preview-box{width:62%;align-self:center;aspect-ratio:4\/5;border-radius:12px;border:1px solid #e5e5e5;overflow:hidden;background:#eee;cursor:grab;user-select:none;position:relative;}\r\n  .ecm-preview-box.dragging-img{cursor:grabbing;}\r\n  #ecm-canvas{width:100%;height:100%;display:block;touch-action:none;}\r\n  .ecm-canvas-hint{text-align:center;font-size:11px;color:#bbb;margin-top:5px;}\r\n\r\n  .ecm-save-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:62%;align-self:center;margin-top:.75rem;padding:10px;border:1px solid #9ACA3C;border-radius:8px;background:#9ACA3C;color:#fff;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;}\r\n  .ecm-save-btn:hover{background:#F57F38;border-color:#F57F38;color:#fff;}\r\n  .ecm-save-btn:active{transform:scale(.98);}\r\n\r\n  .ecm-save-remark{\r\n    width:62%;align-self:center;text-align:center;\r\n    font-size:12px;line-height:1.6;color:#888;margin-top:.6rem;\r\n  }\r\n  .ecm-save-remark a{\r\n    color:#F57F38;font-weight:600;text-decoration:underline;\r\n  }\r\n\r\n  .ecm-consent{\r\n    width:62%;align-self:center;display:flex;align-items:flex-start;gap:8px;\r\n    margin-top:.85rem;font-size:12px;line-height:1.55;color:#666;text-align:left;\r\n  }\r\n  .ecm-consent input[type=\"checkbox\"]{\r\n    flex-shrink:0;width:16px;height:16px;margin-top:2px;accent-color:#9ACA3C;cursor:pointer;\r\n  }\r\n  .ecm-consent label{cursor:pointer;}\r\n  .ecm-save-btn:disabled{\r\n    opacity:.5;cursor:not-allowed;background:#ccc;border-color:#ccc;\r\n  }\r\n  .ecm-save-btn:disabled:hover{background:#ccc;border-color:#ccc;}\r\n\r\n  @media(max-width:700px){\r\n    .ecm-wrap{flex-direction:column;}\r\n    .ecm-left{border-right:none;border-bottom:1px solid #e8e8e8;}\r\n    .ecm-preview-box{width:80%;}\r\n    .ecm-save-btn{width:80%;}\r\n    .ecm-save-remark{width:80%;}\r\n    .ecm-consent{width:80%;}\r\n  }\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@3.19.0\/dist\/tabler-icons.min.css\">\r\n\r\n<div class=\"ecm-wrap\">\r\n\r\n  <div class=\"ecm-left\">\r\n    <p class=\"ecm-panel-title\"><i class=\"ti ti-edit\"><\/i>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1b\u0e2a\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e19\u0e49\u0e2d\u0e07\u0e2b\u0e21\u0e32<\/p>\r\n\r\n    <div class=\"ecm-section\">\r\n      <span class=\"ecm-label\">1. \u0e0a\u0e37\u0e48\u0e2d<\/span>\r\n      <input class=\"ecm-input\" id=\"ecm-name\" type=\"text\" >\r\n    <\/div>\r\n    <div class=\"ecm-section\">\r\n      <span class=\"ecm-label\">2. \u0e2d\u0e32\u0e22\u0e38 (\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 20 \u0e1b\u0e35)<\/span>\r\n      <input class=\"ecm-input\" id=\"ecm-age\" type=\"number\" min=\"1\" max=\"20\">\r\n    <\/div>\r\n    <div class=\"ecm-section\">\r\n      <span class=\"ecm-label\">3. \u0e19\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 <\/span>\r\n      <textarea class=\"ecm-textarea\" id=\"ecm-habit\" maxlength=\"30\"><\/textarea>\r\n      <span class=\"ecm-charcount\" id=\"ecm-habit-count\">0\/30<\/span>\r\n    <\/div>\r\n\r\n    <hr class=\"ecm-divider\">\r\n\r\n    <div class=\"ecm-section\">\r\n      <span class=\"ecm-label\">\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/span>\r\n      <div class=\"ecm-upload\" id=\"ecm-upload-area\" onclick=\"document.getElementById('ecm-file-input').click()\">\r\n        <span class=\"ecm-upload-icon\"><i class=\"ti ti-photo-up\"><\/i><\/span>\r\n        <p>\u0e04\u0e25\u0e34\u0e01! \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/p>\r\n        <p class=\"ecm-sub\">JPG \u00b7 PNG \u00b7 WEBP \u00b7 \u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5MB<\/p>\r\n        <p class=\"ecm-sub\">\u0e41\u0e19\u0e30\u0e19\u0e33\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19 4:5 (\u0e40\u0e0a\u0e48\u0e19 1080\u00d71350px) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a IG<\/p>\r\n        <input type=\"file\" id=\"ecm-file-input\" accept=\"image\/*\">\r\n      <\/div>\r\n      <div class=\"ecm-thumb-wrap\" id=\"ecm-thumb-wrap\">\r\n        <img id=\"ecm-thumb\" alt=\"\">\r\n        <button class=\"ecm-remove-btn\" onclick=\"ecmRemoveImage(event)\"><i class=\"ti ti-x\"><\/i><\/button>\r\n      <\/div>\r\n      <div class=\"ecm-img-controls\" id=\"ecm-img-controls\">\r\n        <div class=\"ecm-img-hint\"><i class=\"ti ti-hand-move\" style=\"font-size:13px\"><\/i> \u0e25\u0e32\u0e01\u0e23\u0e39\u0e1b\u0e43\u0e19\u0e01\u0e25\u0e48\u0e2d\u0e07 Preview \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19 \u00b7 Scroll \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e0b\u0e39\u0e21<\/div>\r\n        <div style=\"display:flex;gap:8px;align-self:flex-end;\">\r\n          <button class=\"ecm-reset-btn\" onclick=\"ecmResetTransform()\"><i class=\"ti ti-refresh\"><\/i> \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15<\/button>\r\n          <button class=\"ecm-reset-btn\" style=\"color:#e53e3e;border-color:#f3c7c7;\" onclick=\"ecmRemoveImage(event)\"><i class=\"ti ti-trash\"><\/i> \u0e25\u0e1a\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"ecm-right\">\r\n    <p class=\"ecm-panel-title\"><i class=\"ti ti-eye\"><\/i> \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 Real-time<\/p>\r\n\r\n    <div class=\"ecm-preview-box\" id=\"ecm-preview-box\">\r\n      <canvas id=\"ecm-canvas\"><\/canvas>\r\n    <\/div>\r\n    <div class=\"ecm-canvas-hint\" id=\"ecm-canvas-hint\" style=\"display:none\">\r\n      \u0e25\u0e32\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19 \u00b7 Scroll \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e0b\u0e39\u0e21\u0e23\u0e39\u0e1b\r\n    <\/div>\r\n\r\n    <div class=\"ecm-consent\">\r\n      <input type=\"checkbox\" id=\"ecm-consent-check\">\r\n      <label for=\"ecm-consent-check\">\r\n        \u0e09\u0e31\u0e19\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e41\u0e25\u0e30\u0e22\u0e34\u0e19\u0e22\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e41\u0e1a\u0e23\u0e19\u0e14\u0e4c\u0e1e\u0e2d\u0e14\u0e35\u0e49 \u0e19\u0e33\u0e23\u0e39\u0e1b\u0e41\u0e25\u0e30\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e32\u0e27\u0e02\u0e2d\u0e07\u0e19\u0e49\u0e2d\u0e07\u0e44\u0e1b\u0e41\u0e0a\u0e23\u0e4c\u0e15\u0e48\u0e2d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 \u0e01\u0e32\u0e23\u0e42\u0e06\u0e29\u0e13\u0e32 \u0e41\u0e25\u0e30\u0e43\u0e19\u0e40\u0e0a\u0e34\u0e07\u0e1e\u0e32\u0e13\u0e34\u0e0a\u0e22\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e43\u0e2b\u0e49\u0e17\u0e32\u0e2a\u0e04\u0e19\u0e2d\u0e37\u0e48\u0e19 \u0e46\r\n      <\/label>\r\n    <\/div>\r\n\r\n    <button class=\"ecm-save-btn\" id=\"ecm-save-btn\" onclick=\"ecmSave()\" disabled>\r\n      <i class=\"ti ti-download\"><\/i> \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e20\u0e32\u0e1e\r\n    <\/button>\r\n    <p class=\"ecm-save-remark\">\r\n      \u0e2a\u0e48\u0e07\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e43\u0e19 LINE ! \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e38\u0e49\u0e19\u0e02\u0e36\u0e49\u0e19 Billboard \u0e02\u0e2d\u0e07 Pawdy!<br>\r\n      <a href=\"https:\/\/lin.ee\/URKKZYX\" target=\"_blank\" rel=\"noopener\">\u0e04\u0e25\u0e34\u0e01 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e23\u0e39\u0e1b\u0e43\u0e19 LINE<\/a>\r\n    <\/p>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =====================================================================\r\n     <script> \u2014 \u0e25\u0e2d\u0e08\u0e34\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e02\u0e2d\u0e07 Part 1 (\u0e1f\u0e2d\u0e23\u0e4c\u0e21 + canvas preview + consent\r\n     checkbox + \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e23\u0e39\u0e1b)\r\n     ===================================================================== -->\r\n<script>\r\n(function(){\r\n  const canvas = document.getElementById('ecm-canvas');\r\n  const ctx    = canvas.getContext('2d');\r\n  const box    = document.getElementById('ecm-preview-box');\r\n\r\n  \/* ---- \u0e04\u0e27\u0e32\u0e21\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e2d\u0e07 \"\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e2d\u0e2d\u0e01\u0e21\u0e32\" \u0e25\u0e47\u0e2d\u0e01\u0e44\u0e27\u0e49\u0e04\u0e07\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49 \u0e41\u0e22\u0e01\u0e08\u0e32\u0e01\r\n     \u0e02\u0e19\u0e32\u0e14\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e08\u0e23\u0e34\u0e07\u0e1a\u0e19\u0e08\u0e2d (\u0e0b\u0e36\u0e48\u0e07\u0e22\u0e31\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e15\u0e32\u0e21 Preview \u0e1c\u0e48\u0e32\u0e19 CSS width:100%;\r\n     height:100% \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e40\u0e14\u0e34\u0e21) \u2014 \u0e17\u0e38\u0e01\u0e01\u0e32\u0e23\u0e04\u0e33\u0e19\u0e27\u0e13\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\/\u0e02\u0e19\u0e32\u0e14\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19\u0e44\u0e1f\u0e25\u0e4c\u0e19\u0e35\u0e49\r\n     \u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e04\u0e48\u0e32 OUTPUT_W\/OUTPUT_H \u0e19\u0e35\u0e49\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19 \u0e44\u0e21\u0e48\u0e41\u0e15\u0e30\u0e02\u0e19\u0e32\u0e14\u0e08\u0e2d\/\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e40\u0e25\u0e22 ---- *\/\r\n  const OUTPUT_W = 1080;\r\n  const OUTPUT_H = 1350;\r\n\r\n  \/* ---- getScale(): \u0e04\u0e33\u0e19\u0e27\u0e13 scale \u0e02\u0e2d\u0e07\u0e1f\u0e2d\u0e19\u0e15\u0e4c\/\u0e23\u0e30\u0e22\u0e30\u0e02\u0e2d\u0e1a\u0e08\u0e32\u0e01 \"\u0e04\u0e27\u0e32\u0e21\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 canvas\r\n     \u0e08\u0e23\u0e34\u0e07\" (canvasW = canvas.width) \u0e40\u0e17\u0e35\u0e22\u0e1a\u0e01\u0e31\u0e1a BASE_OUTPUT_W \u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\r\n     canvas.width \u0e16\u0e39\u0e01\u0e25\u0e47\u0e2d\u0e01\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e1a OUTPUT_W \u0e40\u0e2a\u0e21\u0e2d\u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e08\u0e32\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e44\u0e2b\u0e19\r\n     (\u0e14\u0e39 resize() \u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07) \u0e1c\u0e25\u0e04\u0e37\u0e2d\u0e17\u0e38\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e44\u0e14\u0e49 scale \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e40\u0e1b\u0e4a\u0e30 ---- *\/\r\n  const BASE_OUTPUT_W = 1080;\r\n  function getScale(canvasW){\r\n    return canvasW \/ BASE_OUTPUT_W;\r\n  }\r\n\r\n  let uploadedImg = null;\r\n  let imgZoom=1, imgOffX=0, imgOffY=0;\r\n\r\n  \/* \u2605\u2605\u2605 \u0e23\u0e39\u0e1b\u0e01\u0e23\u0e2d\u0e1a (Frame) \u0e08\u0e32\u0e01\u0e17\u0e35\u0e21\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a \u2014 \u0e16\u0e49\u0e32\u0e2a\u0e48\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e2b\u0e21\u0e48\u0e21\u0e32 \u0e41\u0e01\u0e49 URL \u0e15\u0e23\u0e07\u0e19\u0e35\u0e49\r\n     \u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27\u0e1e\u0e2d (https:\/\/ \u0e01\u0e31\u0e19 mixed-content \u0e16\u0e39\u0e01\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e40\u0e07\u0e35\u0e22\u0e1a\u0e46 \u0e1a\u0e19\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d\/\r\n     \u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a HTTPS) \u2605\u2605\u2605 *\/\r\n  const FRAME_URL = \"http:\/\/pawdy.co.th\/wp-content\/uploads\/2026\/07\/PawdyDekGenZ_Frame_ReadyToUse-1-1.png\";\r\n  const frameImg = new Image();\r\n  let frameLoaded = false;\r\n  frameImg.onload  = function(){ frameLoaded = true; draw(); };\r\n  frameImg.onerror = function(){ console.error('\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e01\u0e23\u0e2d\u0e1a\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a FRAME_URL:', FRAME_URL); };\r\n  frameImg.src = FRAME_URL;\r\n\r\n  \/* \u2605\u2605\u2605 \u0e1b\u0e23\u0e31\u0e1a \"\u0e02\u0e19\u0e32\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\" \/ \"\u0e2a\u0e35\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\" \u0e15\u0e23\u0e07\u0e19\u0e35\u0e49 (\u0e2b\u0e19\u0e48\u0e27\u0e22 px \u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\r\n     BASE_OUTPUT_W=1080 \u0e04\u0e37\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e08\u0e23\u0e34\u0e07 \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e02\u0e19\u0e32\u0e14 Preview \u0e1a\u0e19\u0e08\u0e2d)\r\n  \u2605\u2605\u2605 *\/\r\n  const FIXED_FONT_SIZE = 57;          \/\/ \u0e02\u0e19\u0e32\u0e14\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 \u0e19\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\r\n  const HABIT_FONT_SIZE = 44;          \/\/ \u0e02\u0e19\u0e32\u0e14\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 \u0e0a\u0e37\u0e48\u0e2d+\u0e2d\u0e32\u0e22\u0e38\r\n  const HABIT_COLOR     = '#11371f';   \/\/ \u0e2a\u0e35\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 \u0e19\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\r\n  const LABEL_COLOR     = '#000000';   \/\/ \u0e2a\u0e35\u0e04\u0e33\u0e27\u0e48\u0e32 \"\u0e0a\u0e37\u0e48\u0e2d :\" \/ \"\u0e2d\u0e32\u0e22\u0e38 :\" \/ \"\u0e02\u0e27\u0e1a\"  \u2190 \u0e14\u0e33\r\n  const VALUE_COLOR     = '#9ACA3C';   \/\/ \u0e2a\u0e35\u0e02\u0e2d\u0e07\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e01\u0e23\u0e2d\u0e01\u0e08\u0e23\u0e34\u0e07 (\u0e0a\u0e37\u0e48\u0e2d \/ \u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e2d\u0e32\u0e22\u0e38)\r\n  const TEXT_WEIGHT     = 'bold';      \/\/ \u0e04\u0e27\u0e32\u0e21\u0e2b\u0e19\u0e32\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23 ('bold' \u0e2b\u0e23\u0e37\u0e2d 'normal')\r\n\r\n  \/* \u2605\u2605\u2605 \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e41\u0e25\u0e49\u0e27\u0e27\u0e48\u0e32\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e02\u0e32\u0e27\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e01\u0e23\u0e2d\u0e1a\u0e2d\u0e22\u0e39\u0e48\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e08\u0e23\u0e34\u0e07\u0e1e\u0e2d\u0e14\u0e35 \u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\r\n     \u0e0a\u0e14\u0e40\u0e0a\u0e22\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19\u0e40\u0e25\u0e22 \u2014 \u0e16\u0e49\u0e32\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 FRAME_URL \u0e41\u0e25\u0e49\u0e27\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2d\u0e35\u0e22\u0e07 \u0e04\u0e48\u0e2d\u0e22\u0e1b\u0e23\u0e31\u0e1a\r\n     \u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e19\u0e35\u0e49\u0e43\u0e2b\u0e21\u0e48 (\u0e2b\u0e19\u0e48\u0e27\u0e22 px \u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 BASE_OUTPUT_W=1080,\r\n     \u0e25\u0e1a=\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e0b\u0e49\u0e32\u0e22, \u0e1a\u0e27\u0e01=\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e02\u0e27\u0e32) \u2605\u2605\u2605 *\/\r\n  const TEXT_OFFSET_X   = 0;\r\n\r\n  \/* \u2605\u2605\u2605 \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e41\u0e19\u0e27\u0e15\u0e31\u0e49\u0e07\u0e02\u0e2d\u0e07 \"\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e19\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\" \u0e01\u0e31\u0e1a \"\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e0a\u0e37\u0e48\u0e2d+\u0e2d\u0e32\u0e22\u0e38\"\r\n     \u0e41\u0e22\u0e01\u0e2d\u0e34\u0e2a\u0e23\u0e30\u0e08\u0e32\u0e01\u0e01\u0e31\u0e19 \u0e17\u0e31\u0e49\u0e07\u0e04\u0e39\u0e48\u0e27\u0e31\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e08\u0e32\u0e01 \"\u0e02\u0e2d\u0e1a\u0e25\u0e48\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\" (\u0e2b\u0e19\u0e48\u0e27\u0e22 px\r\n     \u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 BASE_OUTPUT_W=1080) \u2014 \u0e22\u0e34\u0e48\u0e07\u0e04\u0e48\u0e32\u0e21\u0e32\u0e01 \u0e22\u0e34\u0e48\u0e07\u0e02\u0e22\u0e31\u0e1a\u0e02\u0e36\u0e49\u0e19\u0e1a\u0e19\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19 \u2605\u2605\u2605 *\/\r\n  const HABIT_BOTTOM_PADDING = 155;    \/\/ \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 \"\u0e19\u0e34\u0e2a\u0e31\u0e22\"\r\n  const TEXT_BOTTOM_PADDING  = 65;     \/\/ \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 \"\u0e0a\u0e37\u0e48\u0e2d+\u0e2d\u0e32\u0e22\u0e38\"\r\n  const TEXT_SIDE_PADDING    = 108;    \/\/ \u0e23\u0e30\u0e22\u0e30\u0e23\u0e48\u0e19\u0e0b\u0e49\u0e32\u0e22-\u0e02\u0e27\u0e32 \u0e01\u0e31\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e19\u0e02\u0e2d\u0e1a\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e02\u0e32\u0e27\r\n\r\n  \/* \u2605\u2605\u2605 \u0e08\u0e33\u0e19\u0e27\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e02\u0e2d\u0e07\u0e0a\u0e48\u0e2d\u0e07 \"\u0e19\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\" \u2014 \u0e15\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a\r\n     attribute maxlength \u0e02\u0e2d\u0e07 <textarea id=\"ecm-habit\"> \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 (\u0e41\u0e01\u0e49 2 \u0e17\u0e35\u0e48\r\n     \u0e43\u0e2b\u0e49\u0e15\u0e23\u0e07\u0e01\u0e31\u0e19\u0e40\u0e2a\u0e21\u0e2d\u0e16\u0e49\u0e32\u0e08\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e33\u0e19\u0e27\u0e19) \u2605\u2605\u2605 *\/\r\n  const HABIT_MAX_CHARS = 26;\r\n\r\n  function getThemeFont(){\r\n    try{\r\n      const f = getComputedStyle(document.body).fontFamily;\r\n      return f && f.trim() ? f : 'sans-serif';\r\n    }catch(e){ return 'sans-serif'; }\r\n  }\r\n\r\n  let isDragging=false, dragSX=0, dragSY=0;\r\n  let offXAtD=0, offYAtD=0;\r\n\r\n  \/* ---- resize(): \u0e25\u0e47\u0e2d\u0e01 canvas.width\/height \u0e43\u0e2b\u0e49\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e1a OUTPUT_W\/OUTPUT_H\r\n     \u0e40\u0e2a\u0e21\u0e2d \u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e08\u0e32\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e44\u0e2b\u0e19 ---- *\/\r\n  function resize(){\r\n    canvas.width = OUTPUT_W;\r\n    canvas.height = OUTPUT_H;\r\n    draw();\r\n  }\r\n\r\n  function drawImg(w,h){\r\n    if(!uploadedImg){ ctx.fillStyle='#eeeeee'; ctx.fillRect(0,0,w,h); return; }\r\n    const base = Math.max(w\/uploadedImg.width, h\/uploadedImg.height);\r\n    const scale = base * imgZoom;\r\n    const sw = uploadedImg.width*scale, sh=uploadedImg.height*scale;\r\n    ctx.drawImage(uploadedImg,(w-sw)\/2+imgOffX,(h-sh)\/2+imgOffY,sw,sh);\r\n  }\r\n\r\n  \/* ---- wrapSegments(): \u0e15\u0e31\u0e14\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e41\u0e1a\u0e1a\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a \"\u0e2b\u0e25\u0e32\u0e22\u0e2a\u0e35\u0e43\u0e19\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\r\n     \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\" ---- *\/\r\n  function wrapSegments(segments, maxW){\r\n    const tokens = [];\r\n    segments.forEach(function(seg){\r\n      const parts = seg.text.split(' ');\r\n      parts.forEach(function(part, idx){\r\n        if(part !== '') tokens.push({ text: part, color: seg.color });\r\n        if(idx < parts.length - 1) tokens.push({ text: ' ', color: seg.color });\r\n      });\r\n    });\r\n\r\n    const lines = []; let cur = []; let curText = '';\r\n    function pushCur(){ if(cur.length){ lines.push(cur); cur=[]; curText=''; } }\r\n\r\n    tokens.forEach(function(tok){\r\n      if(tok.text === ' '){\r\n        const t = curText + ' ';\r\n        if(ctx.measureText(t).width > maxW && curText) pushCur();\r\n        else { cur.push(tok); curText += ' '; }\r\n        return;\r\n      }\r\n      if(ctx.measureText(tok.text).width > maxW){\r\n        pushCur();\r\n        let chunk = '';\r\n        for(const ch of tok.text){\r\n          const t = chunk + ch;\r\n          if(ctx.measureText(t).width > maxW && chunk){\r\n            lines.push([{ text: chunk, color: tok.color }]);\r\n            chunk = ch;\r\n          } else chunk = t;\r\n        }\r\n        if(chunk){ cur = [{ text: chunk, color: tok.color }]; curText = chunk; }\r\n        return;\r\n      }\r\n      const t = curText + tok.text;\r\n      if(ctx.measureText(t).width > maxW && curText){\r\n        pushCur(); cur = [tok]; curText = tok.text;\r\n      } else { cur.push(tok); curText = t; }\r\n    });\r\n    pushCur();\r\n    return lines.length ? lines : [[]];\r\n  }\r\n\r\n  function buildHabitLine(){\r\n    let habit = document.getElementById('ecm-habit').value.trim();\r\n    if(!habit) return [];\r\n    if(habit.length > HABIT_MAX_CHARS) habit = habit.slice(0, HABIT_MAX_CHARS);\r\n    return [{ size: FIXED_FONT_SIZE, segments: [{ text: habit, color: HABIT_COLOR }] }];\r\n  }\r\n\r\n  function buildNameAgeLine(){\r\n    const name = document.getElementById('ecm-name').value.trim();\r\n    const age  = document.getElementById('ecm-age').value.trim();\r\n\r\n    const nameAgeSegments = [];\r\n    if(name){\r\n      nameAgeSegments.push({ text: '\u0e0a\u0e37\u0e48\u0e2d : ', color: LABEL_COLOR });\r\n      nameAgeSegments.push({ text: name,     color: VALUE_COLOR });\r\n    }\r\n    if(age){\r\n      if(nameAgeSegments.length) nameAgeSegments.push({ text: '   ', color: VALUE_COLOR });\r\n      nameAgeSegments.push({ text: '\u0e2d\u0e32\u0e22\u0e38 : ', color: LABEL_COLOR });\r\n      nameAgeSegments.push({ text: age,       color: VALUE_COLOR });\r\n      nameAgeSegments.push({ text: ' \u0e02\u0e27\u0e1a',    color: LABEL_COLOR });\r\n    }\r\n    if(!nameAgeSegments.length) return [];\r\n    return [{ size: HABIT_FONT_SIZE, segments: nameAgeSegments }];\r\n  }\r\n\r\n  function drawLinesBlock(w,h,rawLines,bottomPadding){\r\n    if(!rawLines.length) return;\r\n\r\n    ctx.textAlign = 'left';\r\n\r\n    const scale = getScale(w);\r\n    const padV = bottomPadding * scale, padH = TEXT_SIDE_PADDING * scale;\r\n\r\n    let allLines = [];\r\n    rawLines.forEach(function(item){\r\n      const scaledSize = Math.round(item.size * scale);\r\n      ctx.font = TEXT_WEIGHT + ' ' + scaledSize + 'px ' + getThemeFont();\r\n      wrapSegments(item.segments, w - padH*2).forEach(function(tokenLine){\r\n        allLines.push({ tokens: tokenLine, size: scaledSize });\r\n      });\r\n    });\r\n\r\n    const lineHeights = allLines.map(function(l){ return Math.round(l.size*1.5); });\r\n    const blockH = lineHeights.reduce(function(a,b){ return a+b; }, 0);\r\n\r\n    const centerX = w\/2 + (TEXT_OFFSET_X * scale);\r\n    let cursorY = h - padV - blockH;\r\n\r\n    allLines.forEach(function(line,i){\r\n      ctx.font = TEXT_WEIGHT + ' ' + line.size + 'px ' + getThemeFont();\r\n      cursorY += lineHeights[i];\r\n\r\n      const lineText = line.tokens.map(function(t){ return t.text; }).join('');\r\n      const lineWidth = ctx.measureText(lineText).width;\r\n      let drawX = centerX - lineWidth\/2;\r\n      const baselineY = cursorY - (lineHeights[i]-line.size)\/2;\r\n\r\n      line.tokens.forEach(function(tok){\r\n        ctx.fillStyle = tok.color;\r\n        ctx.fillText(tok.text, drawX, baselineY);\r\n        drawX += ctx.measureText(tok.text).width;\r\n      });\r\n    });\r\n  }\r\n\r\n  function drawText(w,h){\r\n    drawLinesBlock(w, h, buildHabitLine(),    HABIT_BOTTOM_PADDING);\r\n    drawLinesBlock(w, h, buildNameAgeLine(),  TEXT_BOTTOM_PADDING);\r\n  }\r\n\r\n  function drawFrame(w,h){\r\n    if(!frameLoaded) return;\r\n    ctx.drawImage(frameImg, 0, 0, w, h);\r\n  }\r\n\r\n  window.draw = function(){\r\n    const w=canvas.width, h=canvas.height;\r\n    ctx.clearRect(0,0,w,h);\r\n    drawImg(w,h);\r\n    drawFrame(w,h);\r\n    drawText(w,h);\r\n  };\r\n\r\n  document.getElementById('ecm-file-input').addEventListener('change',function(e){\r\n    const file=e.target.files[0]; if(!file)return;\r\n    const reader=new FileReader();\r\n    reader.onload=function(ev){\r\n      const img=new Image();\r\n      img.onload=function(){\r\n        uploadedImg=img;\r\n        document.getElementById('ecm-thumb').src = ev.target.result;\r\n        document.getElementById('ecm-thumb-wrap').style.display='block';\r\n        ecmResetTransform();\r\n        showImgControls(true);\r\n      };\r\n      img.src=ev.target.result;\r\n    };\r\n    reader.readAsDataURL(file);\r\n  });\r\n\r\n  function showImgControls(show){\r\n    document.getElementById('ecm-img-controls').classList.toggle('visible',show);\r\n    document.getElementById('ecm-canvas-hint').style.display = show?'block':'none';\r\n  }\r\n\r\n  window.ecmRemoveImage=function(e){\r\n    e.stopPropagation();\r\n    uploadedImg=null;\r\n    document.getElementById('ecm-thumb').src='';\r\n    document.getElementById('ecm-thumb-wrap').style.display='none';\r\n    document.getElementById('ecm-file-input').value='';\r\n    showImgControls(false);\r\n    ecmResetTransform();\r\n  };\r\n\r\n  window.ecmResetTransform=function(){\r\n    imgZoom=1;imgOffX=0;imgOffY=0;\r\n    draw();\r\n  };\r\n\r\n  canvas.addEventListener('mousedown',function(e){\r\n    if(!uploadedImg) return;\r\n    isDragging=true;\r\n    dragSX=e.clientX; dragSY=e.clientY;\r\n    offXAtD=imgOffX; offYAtD=imgOffY;\r\n    box.classList.add('dragging-img');\r\n  });\r\n  window.addEventListener('mousemove',function(e){\r\n    if(!isDragging)return;\r\n    const ratio=canvas.width\/box.clientWidth;\r\n    const dx=(e.clientX-dragSX)*ratio;\r\n    const dy=(e.clientY-dragSY)*ratio;\r\n    imgOffX=offXAtD+dx; imgOffY=offYAtD+dy;\r\n    draw();\r\n  });\r\n  window.addEventListener('mouseup',function(){\r\n    isDragging=false;\r\n    box.classList.remove('dragging-img');\r\n  });\r\n\r\n  canvas.addEventListener('touchstart',function(e){\r\n    if(!uploadedImg || e.touches.length!==1)return;\r\n    e.preventDefault();\r\n    isDragging=true;\r\n    dragSX=e.touches[0].clientX; dragSY=e.touches[0].clientY;\r\n    offXAtD=imgOffX; offYAtD=imgOffY;\r\n  },{passive:false});\r\n  canvas.addEventListener('touchmove',function(e){\r\n    if(!isDragging||e.touches.length!==1)return;\r\n    e.preventDefault();\r\n    const ratio=canvas.width\/box.clientWidth;\r\n    const dx=(e.touches[0].clientX-dragSX)*ratio;\r\n    const dy=(e.touches[0].clientY-dragSY)*ratio;\r\n    imgOffX=offXAtD+dx; imgOffY=offYAtD+dy;\r\n    draw();\r\n  },{passive:false});\r\n  canvas.addEventListener('touchend',function(){isDragging=false;});\r\n\r\n  canvas.addEventListener('wheel',function(e){\r\n    if(!uploadedImg)return;\r\n    e.preventDefault();\r\n    imgZoom=Math.min(3,Math.max(0.5,imgZoom-e.deltaY*0.001));\r\n    draw();\r\n  },{passive:false});\r\n\r\n  \/\/ sync the HTML maxlength attribute with HABIT_MAX_CHARS, and\r\n  \/\/ update the live \"x\/30\" character counter under the habit field.\r\n  const habitEl = document.getElementById('ecm-habit');\r\n  const habitCountEl = document.getElementById('ecm-habit-count');\r\n  if(habitEl) habitEl.maxLength = HABIT_MAX_CHARS;\r\n\r\n  function updateHabitCount(){\r\n    if(!habitEl || !habitCountEl) return;\r\n    const len = habitEl.value.length;\r\n    habitCountEl.textContent = len + '\/' + HABIT_MAX_CHARS;\r\n    habitCountEl.classList.toggle('ecm-charcount-limit', len >= HABIT_MAX_CHARS);\r\n  }\r\n\r\n  ['ecm-name','ecm-age','ecm-habit'].forEach(function(id){\r\n    document.getElementById(id).addEventListener('input',function(){\r\n      if(id === 'ecm-habit') updateHabitCount();\r\n      draw();\r\n    });\r\n  });\r\n  updateHabitCount();\r\n\r\n  \/\/ ---- Consent checkbox: \u0e1b\u0e38\u0e48\u0e21\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e20\u0e32\u0e1e\u0e08\u0e30\u0e01\u0e14\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e15\u0e34\u0e4a\u0e01\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\r\n  \/\/ \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e48\u0e2d\u0e19 ----\r\n  const consentCheck = document.getElementById('ecm-consent-check');\r\n  const saveBtn = document.getElementById('ecm-save-btn');\r\n  if (consentCheck && saveBtn) {\r\n    consentCheck.addEventListener('change', function(){\r\n      saveBtn.disabled = !consentCheck.checked;\r\n    });\r\n  }\r\n\r\n  window.ecmSave=function(){\r\n    if (consentCheck && !consentCheck.checked) {\r\n      alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e34\u0e4a\u0e01\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e48\u0e2d\u0e19\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e20\u0e32\u0e1e');\r\n      return;\r\n    }\r\n    const link=document.createElement('a');\r\n    link.download='card.png';\r\n    link.href=canvas.toDataURL('image\/png');\r\n    link.click();\r\n  };\r\n\r\n  \/* ---- init: \u0e23\u0e2d document.fonts.ready \u0e01\u0e48\u0e2d\u0e19\u0e27\u0e32\u0e14\u0e04\u0e23\u0e31\u0e49\u0e07\u0e41\u0e23\u0e01\u0e40\u0e2a\u0e21\u0e2d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\r\n     \u0e1b\u0e31\u0e0d\u0e2b\u0e32 ctx.measureText() \u0e27\u0e31\u0e14\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e14\u0e49\u0e27\u0e22\u0e1f\u0e2d\u0e19\u0e15\u0e4c fallback \u0e02\u0e2d\u0e07\r\n     \u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e41\u0e17\u0e19\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e08\u0e23\u0e34\u0e07\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e40\u0e27\u0e47\u0e1a\u0e22\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e21\u0e48\u0e40\u0e2a\u0e23\u0e47\u0e08 (\u0e21\u0e31\u0e01\u0e40\u0e01\u0e34\u0e14\u0e1a\u0e19\r\n     \u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d\u0e17\u0e35\u0e48\u0e40\u0e19\u0e47\u0e15\u0e0a\u0e49\u0e32\u0e01\u0e27\u0e48\u0e32) \u0e21\u0e35 fallback timeout \u0e01\u0e31\u0e19\u0e40\u0e04\u0e2a\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e40\u0e25\u0e22 ---- *\/\r\n  window.addEventListener('resize',resize);\r\n\r\n  function initOnceFontsReady(){\r\n    resize();\r\n  }\r\n  if (document.fonts && document.fonts.ready) {\r\n    const fallbackTimer = setTimeout(initOnceFontsReady, 1500);\r\n    document.fonts.ready.then(function(){\r\n      clearTimeout(fallbackTimer);\r\n      initOnceFontsReady();\r\n    });\r\n  } else {\r\n    initOnceFontsReady();\r\n  }\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=\"elementor-element elementor-element-7376ae9 e-flex e-con-boxed e-con e-parent\" data-id=\"7376ae9\" 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-2b41a1e elementor-widget elementor-widget-heading\" data-id=\"2b41a1e\" 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<h3 class=\"elementor-heading-title elementor-size-default\">\u0e2d\u0e22\u0e48\u0e32\u0e25\u0e37\u0e21! \u0e23\u0e48\u0e27\u0e21\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e23\u0e39\u0e1b\u0e02\u0e2d\u0e07\u0e40\u0e14\u0e47\u0e01 \u0e46 \u0e08\u0e30\u0e44\u0e14\u0e49\u0e04\u0e31\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1b\u0e02\u0e36\u0e49\u0e19 Billboard \u0e43\u0e08\u0e01\u0e25\u0e32\u0e07 \u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e\u0e2f <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4fd907 elementor-widget elementor-widget-heading\" data-id=\"d4fd907\" 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<p class=\"elementor-heading-title elementor-size-default\">\u0e07\u0e48\u0e32\u0e22\u0e19\u0e34\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27..\n\n<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f27e105 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"f27e105\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e23\u0e39\u0e1b \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e25\u0e48\u0e32\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e17\u0e31\u0e1a\u0e43\u0e08\u0e08\u0e32\u0e01\u0e19\u0e34\u0e2a\u0e31\u0e22\u0e01\u0e27\u0e19\u0e46 \u0e02\u0e2d\u0e07\u0e19\u0e49\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e2a\u0e39\u0e07\u0e27\u0e31\u0e22 (\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e14\u0e49\u0e27\u0e22\u0e01\u0e31\u0e19\u0e21\u0e32\u0e19\u0e32\u0e19\u0e19\u0e19\u0e19\u0e19\u0e19)<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e25\u0e07 Facebook \u0e2b\u0e23\u0e37\u0e2d Instagram \u0e0a\u0e48\u0e27\u0e22\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30\u0e43\u0e2b\u0e49\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e19\u0e49\u0e32\u0e32\u0e32 \u0e2d\u0e22\u0e48\u0e32\u0e25\u0e34\u0e21\u0e43\u0e2a\u0e48 #pawdysenior7+ #\u0e40\u0e14\u0e47\u0e01\u0e40\u0e08\u0e19\u0e0b\u0e35\u0e40\u0e19\u0e35\u0e22\u0e23\u0e4c <\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0e41\u0e0a\u0e23\u0e4c\u0e25\u0e34\u0e49\u0e07\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19 \u0e17\u0e32\u0e07\u0e44\u0e25\u0e19\u0e4c @pawdymemberclub<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78c1bdd elementor-widget elementor-widget-heading\" data-id=\"78c1bdd\" 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<p class=\"elementor-heading-title elementor-size-default\">\u0e41\u0e04\u0e48\u0e19\u0e35\u0e49\u0e01\u0e47\u0e23\u0e2d\u0e40\u0e25\u0e22\u0e27\u0e48\u0e32\u0e40\u0e14\u0e47\u0e01 \u0e46 \u0e04\u0e19\u0e44\u0e2b\u0e19\u0e08\u0e30\u0e44\u0e14\u0e49\u0e02\u0e36\u0e49\u0e19 Billboard \u0e43\u0e08\u0e01\u0e25\u0e32\u0e07 \u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e\u0e2f \u0e1a\u0e49\u0e32\u0e07<\/p>\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-39fe6b8 e-flex e-con-boxed e-con e-parent\" data-id=\"39fe6b8\" 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-db1bd5a elementor-widget elementor-widget-html\" data-id=\"db1bd5a\" 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<!-- =====================================================================\r\n   PART 2\/2 \u2014 CAMPAIGN PROGRESS BAR (\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e23\u0e27\u0e21\u0e1e\u0e25\u0e31\u0e07\u0e2d\u0e32\u0e22\u0e38\u0e19\u0e49\u0e2d\u0e07\u0e2b\u0e21\u0e32)\r\n   \u0e27\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e19\u0e35\u0e49\u0e43\u0e19 Elementor Pro > HTML Element \u0e15\u0e31\u0e27\u0e17\u0e35\u0e48 2\r\n   \u2605 \u0e15\u0e49\u0e2d\u0e07\u0e27\u0e32\u0e07 Element \u0e19\u0e35\u0e49\u0e44\u0e27\u0e49 \"\u0e43\u0e15\u0e49\" Element \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48 1 (\u0e1f\u0e2d\u0e23\u0e4c\u0e21 + Preview) \u0e40\u0e2a\u0e21\u0e2d\r\n     \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e2a\u0e04\u0e23\u0e34\u0e1b\u0e15\u0e4c\u0e19\u0e35\u0e49\u0e14\u0e36\u0e07\u0e04\u0e48\u0e32\u0e2d\u0e32\u0e22\u0e38\u0e08\u0e32\u0e01 #ecm-age \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e44\u0e1f\u0e25\u0e4c Part 1 \u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\r\n     \u0e44\u0e21\u0e48\u0e21\u0e35\u0e0a\u0e48\u0e2d\u0e07\u0e01\u0e23\u0e2d\u0e01\u0e2d\u0e32\u0e22\u0e38\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u2605\r\n\r\n   \u0e01\u0e48\u0e2d\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 PHP snippet \"campaign-counter-snippet.php\" \u0e44\u0e27\u0e49\u0e41\u0e25\u0e49\u0e27\r\n   (REST API endpoint \/wp-json\/campaign\/v1\/total \u0e41\u0e25\u0e30 \/add)\r\n   ===================================================================== -->\r\n<style>\r\n  .dac-card{\r\n    box-sizing:border-box;\r\n    margin-top:1.5rem;\r\n    border-radius:18px;\r\n    padding:1.5rem 1.4rem;\r\n    background:#9ACA3C;\r\n    box-shadow:0 10px 30px rgba(0,0,0,.18);\r\n    color:#fff;\r\n  }\r\n  .dac-title{\r\n    display:flex;align-items:center;gap:8px;\r\n    font-size:16px;font-weight:700;margin-bottom:1rem;color:#fff;\r\n  }\r\n  .dac-title i{color:#fff;font-size:20px;}\r\n  .dac-bar-outer{\r\n    background:rgba(255,255,255,.12);\r\n    border-radius:999px;height:48px;overflow:hidden;position:relative;\r\n    border:1px solid rgba(255,255,255,.18);\r\n  }\r\n  #dac-bar{\r\n    background:linear-gradient(90deg,#F57F38,#d96322);\r\n    height:100%;width:0%;transition:width .6s ease;border-radius:999px;\r\n    box-shadow:0 0 14px rgba(245,127,56,.7);\r\n  }\r\n  #dac-bar-text{\r\n    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\r\n    font-weight:700;font-size:16px;color:#fff;letter-spacing:.02em;\r\n    text-shadow:0 1px 3px rgba(0,0,0,.4);\r\n  }\r\n  .dac-sub{text-align:center;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.75);}\r\n  .dac-sub b{color:#fff;}\r\n  .dac-msg{text-align:center;min-height:18px;margin-top:8px;font-size:13px;font-weight:600;}\r\n  .dac-join-btn{\r\n    display:flex;align-items:center;justify-content:center;gap:8px;\r\n    width:100%;margin-top:14px;padding:12px;border:none;border-radius:10px;\r\n    background:#F57F38;color:#fff;font-weight:700;font-size:14.5px;\r\n    font-family:inherit;cursor:pointer;transition:filter .15s,transform .1s;\r\n  }\r\n  .dac-join-btn:hover{filter:brightness(1.07);color:#fff;}\r\n  .dac-join-btn:active{transform:scale(.98);}\r\n  .dac-join-btn:disabled{opacity:.55;cursor:not-allowed;}\r\n  .dac-hint{font-size:11.5px;color:rgba(255,255,255,.55);text-align:center;margin-top:8px;}\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@3.19.0\/dist\/tabler-icons.min.css\">\r\n\r\n<div class=\"dac-card\" id=\"dog-age-campaign\">\r\n  <div class=\"dac-title\"><i class=\"ti ti-flame\"><\/i> \u0e23\u0e27\u0e21\u0e1e\u0e25\u0e31\u0e07\u0e2d\u0e32\u0e22\u0e38\u0e19\u0e49\u0e2d\u0e07\u0e2b\u0e21\u0e32 \u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22 10,000 \u0e1b\u0e35<\/div>\r\n\r\n  <div class=\"dac-bar-outer\">\r\n    <div id=\"dac-bar\"><\/div>\r\n    <div id=\"dac-bar-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/div>\r\n  <\/div>\r\n\r\n  <p class=\"dac-sub\">\u0e21\u0e35\u0e19\u0e49\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e41\u0e25\u0e49\u0e27 <b id=\"dac-count\">0<\/b> \u0e15\u0e31\u0e27<\/p>\r\n\r\n  <button class=\"dac-join-btn\" id=\"dac-submit-btn\">\r\n    <i class=\"ti ti-paw\"><\/i> \u0e23\u0e48\u0e27\u0e21\u0e41\u0e04\u0e21\u0e40\u0e1b\u0e0d\u0e14\u0e49\u0e27\u0e22\u0e2d\u0e32\u0e22\u0e38\u0e17\u0e35\u0e48\u0e01\u0e23\u0e2d\u0e01\u0e44\u0e27\u0e49\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\r\n  <\/button>\r\n  <p class=\"dac-hint\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e14\u0e36\u0e07\u0e04\u0e48\u0e32 \"\u0e2d\u0e32\u0e22\u0e38\" \u0e08\u0e32\u0e01\u0e0a\u0e48\u0e2d\u0e07\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 (\u0e02\u0e49\u0e2d 2) \u0e21\u0e32\u0e23\u0e48\u0e27\u0e21\u0e41\u0e04\u0e21\u0e40\u0e1b\u0e0d\u0e43\u0e2b\u0e49\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/p>\r\n  <p id=\"dac-message\" class=\"dac-msg\"><\/p>\r\n<\/div>\r\n\r\n\r\n<!-- =====================================================================\r\n     <script> \u2014 \u0e25\u0e2d\u0e08\u0e34\u0e01\u0e02\u0e2d\u0e07 \"\u0e01\u0e32\u0e23\u0e4c\u0e14 Progress Bar \u0e41\u0e04\u0e21\u0e40\u0e1b\u0e0d\" (.dac-*)\r\n     \u0e44\u0e21\u0e48\u0e21\u0e35\u0e0a\u0e48\u0e2d\u0e07\u0e01\u0e23\u0e2d\u0e01\u0e2d\u0e32\u0e22\u0e38\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u2014 ageInput \u0e0a\u0e35\u0e49\u0e44\u0e1b\u0e17\u0e35\u0e48 #ecm-age \u0e43\u0e19 Part 1\r\n     ===================================================================== -->\r\n<script>\r\n(function () {\r\n  const API_BASE = \"\/wp-json\/campaign\/v1\";\r\n  const GOAL = 10000;\r\n  const POLL_INTERVAL_MS = 5000;\r\n\r\n  const bar = document.getElementById(\"dac-bar\");\r\n  const barText = document.getElementById(\"dac-bar-text\");\r\n  const countEl = document.getElementById(\"dac-count\");\r\n  const ageInput = document.getElementById(\"ecm-age\");\r\n  const btn = document.getElementById(\"dac-submit-btn\");\r\n  const msg = document.getElementById(\"dac-message\");\r\n\r\n  function render(total, count) {\r\n    const pct = Math.min(100, (total \/ GOAL) * 100);\r\n    bar.style.width = pct + \"%\";\r\n    barText.textContent = total + \" \/ \" + GOAL + \" \u0e1b\u0e35\";\r\n    countEl.textContent = count;\r\n    if (total >= GOAL) {\r\n      msg.textContent = \"\ud83c\udf89 \u0e04\u0e23\u0e1a\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e41\u0e25\u0e49\u0e27! \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e17\u0e38\u0e01\u0e04\u0e19\u0e21\u0e32\u0e01\u0e46\";\r\n      msg.style.color = \"#ffffff\";\r\n      btn.disabled = true;\r\n    }\r\n  }\r\n\r\n  async function fetchTotal() {\r\n    try {\r\n      const res = await fetch(API_BASE + \"\/total\");\r\n      const data = await res.json();\r\n      render(data.total, data.count);\r\n    } catch (e) {\r\n      console.error(\"\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\", e);\r\n    }\r\n  }\r\n\r\n  fetchTotal();\r\n  setInterval(fetchTotal, POLL_INTERVAL_MS);\r\n\r\n  btn.addEventListener(\"click\", async () => {\r\n    if (!ageInput) {\r\n      msg.textContent = \"\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e0a\u0e48\u0e2d\u0e07\u0e01\u0e23\u0e2d\u0e01\u0e2d\u0e32\u0e22\u0e38 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e27\u0e32\u0e07 Element \u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e44\u0e27\u0e49\u0e40\u0e2b\u0e19\u0e37\u0e2d Element \u0e19\u0e35\u0e49\u0e41\u0e25\u0e49\u0e27\";\r\n      msg.style.color = \"#ff8a8a\";\r\n      return;\r\n    }\r\n\r\n    const age = parseInt(ageInput.value, 10);\r\n\r\n    if (!age || age < 1 || age > 30) {\r\n      msg.textContent = \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01 \\\"\u0e2d\u0e32\u0e22\u0e38\\\" \u0e43\u0e19\u0e02\u0e49\u0e2d 2 \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e43\u0e2b\u0e49\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e23\u0e48\u0e27\u0e21\u0e41\u0e04\u0e21\u0e40\u0e1b\u0e0d\";\r\n      msg.style.color = \"#ff8a8a\";\r\n      ageInput.focus();\r\n      return;\r\n    }\r\n\r\n    btn.disabled = true;\r\n    msg.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01...\";\r\n    msg.style.color = \"#e0c26a\";\r\n\r\n    try {\r\n      const res = await fetch(API_BASE + \"\/add\", {\r\n        method: \"POST\",\r\n        headers: { \"Content-Type\": \"application\/json\" },\r\n        body: JSON.stringify({ age: age }),\r\n      });\r\n      const data = await res.json();\r\n\r\n      if (!res.ok) {\r\n        throw new Error(data.message || \"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\");\r\n      }\r\n\r\n      render(data.total, data.count);\r\n      msg.textContent = \"\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e23\u0e48\u0e27\u0e21\u0e41\u0e04\u0e21\u0e40\u0e1b\u0e0d! \ud83d\udc3e\";\r\n      msg.style.color = \"#ffffff\";\r\n    } catch (e) {\r\n      msg.textContent = \"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14: \" + e.message;\r\n      msg.style.color = \"#ff8a8a\";\r\n      console.error(e);\r\n    } finally {\r\n      btn.disabled = false;\r\n    }\r\n  });\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1b\u0e2a\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e19\u0e49\u0e2d\u0e07\u0e2b\u0e21\u0e32 1. \u0e0a\u0e37\u0e48\u0e2d 2. \u0e2d\u0e32\u0e22\u0e38 (\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 20 \u0e1b\u0e35) 3. \u0e19\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 0\/30 \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e04\u0e25\u0e34\u0e01! \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e JPG \u00b7 PNG \u00b7 WEBP \u00b7 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7689","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/pages\/7689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/comments?post=7689"}],"version-history":[{"count":103,"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/pages\/7689\/revisions"}],"predecessor-version":[{"id":10846,"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/pages\/7689\/revisions\/10846"}],"wp:attachment":[{"href":"https:\/\/pawdy.co.th\/en\/wp-json\/wp\/v2\/media?parent=7689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}