WhatsApp Review Pro – Pixel Perfect<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <style>\n :root {\n --wa-teal: #008069;\n --wa-bg: #efe7de;\n --wa-user: #e7ffdb;\n --wa-cust: #ffffff;\n --status-bar: #006e5a;\n --icon-grey: #919191;\n }\n\n body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; display: flex; height: 100vh; background: #1a1a1b; }\n\n \/* Sidebar Control *\/\n #editor { width: 350px; background: #fff; padding: 20px; overflow-y: auto; border-right: 2px solid #000; z-index: 100; box-shadow: 5px 0 15px rgba(0,0,0,0.5); }\n .section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\n label { display: block; font-weight: bold; font-size: 11px; color: var(--wa-teal); text-transform: uppercase; margin-bottom: 8px; }\n input, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; margin-bottom: 10px; font-size: 14px; }\n \n .btn-group { display: flex; flex-direction: column; gap: 8px; }\n button { padding: 12px; cursor: pointer; border: none; border-radius: 8px; font-weight: bold; transition: 0.2s; }\n .btn-cust { background: #f1f1f1; border: 1px solid #ccc; }\n .btn-me { background: #25d366; color: white; }\n .dl-btn { width: 100%; background: var(--wa-teal); color: white; font-size: 16px; margin-top: 20px; }\n\n \/* Preview Display *\/\n #preview { flex: 1; display: flex; justify-content: center; align-items: center; background: #0b0b0b; }\n #capture-box {\n width: 375px; height: 780px;\n background: var(--wa-bg) url('https:\/\/user-images.githubusercontent.com\/15075759\/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');\n display: flex; flex-direction: column; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.9);\n }\n\n \/* UI Components *\/\n .sys-bar { background: var(--status-bar); height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: white; font-size: 12px; }\n \n .wa-header { background: var(--wa-teal); height: 62px; display: flex; align-items: center; padding: 0 10px; color: white; gap: 8px; }\n .pfp-wrap { width: 38px; height: 38px; border-radius: 50%; background: #ccc; overflow: hidden; position: relative; flex-shrink: 0; }\n .pfp-wrap img { width: 100%; height: 100%; object-fit: cover; }\n .contact-name { font-weight: 500; font-size: 17px; flex: 1; margin-left: 2px; }\n .header-icons { display: flex; gap: 18px; padding-right: 8px; opacity: 0.9; }\n\n .chat-area { flex: 1; padding: 12px; display: flex; flex-direction: column; overflow: hidden; }\n .msg-line { display: flex; width: 100%; margin-bottom: 4px; position: relative; }\n .msg-line.user-type { justify-content: flex-end; }\n \n .bubble { \n max-width: 85%; padding: 8px 10px; font-size: 14.5px; position: relative; \n box-shadow: 0 1px 0.5px rgba(0,0,0,0.15); border-radius: 8px; line-height: 1.4;\n }\n .cust-type .bubble { background: white; border-top-left-radius: 0; }\n .user-type .bubble { background: var(--wa-user); border-top-right-radius: 0; }\n \n \/* Message Tails *\/\n .cust-type .bubble::before { content: \"\"; position: absolute; left: -8px; top: 0; border-right: 10px solid white; border-bottom: 10px solid transparent; }\n .user-type .bubble::before { content: \"\"; position: absolute; right: -8px; top: 0; border-left: 10px solid var(--wa-user); border-bottom: 10px solid transparent; }\n\n .b-meta { font-size: 10px; color: rgba(0,0,0,0.4); float: right; margin: 8px 0 0 10px; display: flex; align-items: center; gap: 2px; }\n .ticks { color: #34b7f1; font-size: 14px; font-weight: bold; }\n\n .wa-footer { padding: 6px 8px 10px 8px; display: flex; align-items: center; gap: 6px; }\n .input-wrapper { flex: 1; background: white; height: 48px; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }\n .input-pill { flex: 1; color: #888; font-size: 16px; margin-left: 10px; }\n .footer-icons { display: flex; gap: 14px; color: var(--icon-grey); align-items: center; }\n .mic-circ { width: 48px; height: 48px; background: var(--wa-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }\n\n .nav-bar { background: black; height: 45px; display: flex; justify-content: space-around; align-items: center; opacity: 0.9; }\n .order-item { background: #f9f9f9; padding: 10px; margin-top: 5px; border: 1px solid #ddd; display: flex; justify-content: space-between; border-radius: 6px; font-size: 13px; }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"editor\">\n <h2 style=\"color:var(--wa-teal); margin-top:0;\">WP Pro Review<\/h2>\n <div class=\"section\">\n <label>1. Profile Identity<\/label>\n <input type=\"file\" accept=\"image\/*\" onchange=\"loadImg(event)\">\n <input type=\"text\" id=\"nameInp\" placeholder=\"Customer Name\" oninput=\"document.getElementById('nameDisp').innerText = this.value || 'John Doe'\">\n <\/div>\n <div class=\"section\">\n <label>2. Message Content<\/label>\n <textarea id=\"msgInp\" rows=\"3\" placeholder=\"Type customer feedback...\"><\/textarea>\n <div class=\"btn-group\">\n <button class=\"btn-cust\" onclick=\"addMsg('cust-type')\">Customer (Left Bubble)<\/button>\n <button class=\"btn-me\" onclick=\"addMsg('user-type')\">Me (Right Bubble)<\/button>\n <\/div>\n <\/div>\n <div id=\"manager\"><\/div>\n <button class=\"dl-btn\" onclick=\"download()\">Download Premium SS<\/button>\n<\/div>\n\n<div id=\"preview\">\n <div id=\"capture-box\">\n <div class=\"sys-bar\">\n <span id=\"time\">10:45<\/span>\n <div style=\"display:flex; gap:6px; align-items:center;\">\n <svg width=\"14\" height=\"14\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12.01 4.01L2 14h20L12.01 4.01z\"\/><\/svg>\n <span style=\"font-weight:bold;\">LTE<\/span>\n <svg width=\"16\" height=\"16\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"wa-header\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\/><\/svg>\n <div class=\"pfp-wrap\"><img decoding=\"async\" id=\"pfp\" src=\"https:\/\/ui-avatars.com\/api\/?name=User&background=888&color=fff\"><\/div>\n <div class=\"contact-name\" id=\"nameDisp\">John Doe<\/div>\n <div class=\"header-icons\">\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\/><\/svg>\n <svg width=\"20\" height=\"20\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"chat-area\" id=\"chat\">\n <div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>\n <\/div>\n\n <div class=\"wa-footer\">\n <div class=\"input-wrapper\">\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z\"\/><\/svg>\n <div class=\"input-pill\">Message<\/div>\n <div class=\"footer-icons\">\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\" style=\"transform: rotate(-45deg);\"><path d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.31 2.69 6 6 6s6-2.69 6-6V6h-1.5z\"\/><\/svg>\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3.2\"\/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"mic-circ\">\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z\"\/><path d=\"M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"nav-bar\">\n <div style=\"width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:11px solid #bbb;\"><\/div>\n <div style=\"border:2px solid #bbb; width:15px; height:15px; border-radius:50%\"><\/div>\n <div style=\"border:2px solid #bbb; width:14px; height:14px; border-radius:3px\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n let msgs = [];\n function loadImg(e) {\n const reader = new FileReader();\n reader.onload = () => document.getElementById('pfp').src = reader.result;\n reader.readAsDataURL(e.target.files[0]);\n }\n function addMsg(type) {\n const txt = document.getElementById('msgInp').value;\n if(!txt) return;\n const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\n msgs.push({ type, txt, time });\n document.getElementById('msgInp').value = '';\n render();\n }\n function move(i, s) {\n const t = i + s;\n if(t >= 0 && t < msgs.length) { [msgs[i], msgs[t]] = [msgs[t], msgs[i]]; render(); }\n }\n function render() {\n const c = document.getElementById('chat');\n const m = document.getElementById('manager');\n c.innerHTML = '<div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>';\n m.innerHTML = '<label>Reorder Feedback<\/label>';\n msgs.forEach((x, i) => {\n const div = document.createElement('div');\n div.className = `msg-line ${x.type}`;\n div.innerHTML = `<div class=\"bubble\">${x.txt}<div class=\"b-meta\">${x.time}${x.type==='user-type'?'<span class=\"ticks\">\u2713\u2713<\/span>':''}<\/div><\/div>`;\n c.appendChild(div);\n\n const item = document.createElement('div');\n item.className = 'order-item';\n item.innerHTML = `<span>${x.txt.slice(0,20)}...<\/span><div><button onclick=\"move(${i},-1)\">\u25b2<\/button><button onclick=\"move(${i},1)\">\u25bc<\/button><\/div>`;\n m.appendChild(item);\n });\n }\n function download() {\n html2canvas(document.getElementById('capture-box'), { scale: 3, useCORS: true }).then(canv => {\n const a = document.createElement('a'); a.download = 'whatsapp_review_pro.png'; a.href = canv.toDataURL(); a.click();\n });\n }\n document.getElementById('time').innerText = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t\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-ba3d4df e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"ba3d4df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa329d6 elementor-widget elementor-widget-html\" data-id=\"fa329d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>WhatsApp Review Pro - Responsive<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --wa-teal: #008069;\r\n --wa-bg: #efe7de;\r\n --wa-user: #e7ffdb;\r\n --wa-cust: #ffffff;\r\n --status-bar: #006e5a;\r\n --icon-grey: #919191;\r\n }\r\n\r\n body { \r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; \r\n margin: 0; \r\n display: flex; \r\n flex-direction: row; \/* Default side-by-side *\/\r\n min-height: 100vh; \r\n background: #1a1a1b; \r\n }\r\n\r\n \/* --- RESPONSIVE LAYOUT LOGIC --- *\/\r\n @media (max-width: 900px) {\r\n body { flex-direction: column; }\r\n #editor { width: 100% !important; border-right: none !important; border-bottom: 3px solid var(--wa-teal); }\r\n #preview { padding: 40px 10px; }\r\n }\r\n\r\n \/* Sidebar Control *\/\r\n #editor { \r\n width: 350px; \r\n background: #fff; \r\n padding: 20px; \r\n overflow-y: auto; \r\n border-right: 2px solid #000; \r\n z-index: 100; \r\n box-sizing: border-box;\r\n }\r\n\r\n .section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\r\n label { display: block; font-weight: bold; font-size: 11px; color: var(--wa-teal); text-transform: uppercase; margin-bottom: 8px; }\r\n input, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; margin-bottom: 10px; font-size: 14px; }\r\n \r\n .btn-group { display: flex; flex-direction: column; gap: 8px; }\r\n button { padding: 12px; cursor: pointer; border: none; border-radius: 8px; font-weight: bold; }\r\n .btn-cust { background: #f1f1f1; border: 1px solid #ccc; }\r\n .btn-me { background: #25d366; color: white; }\r\n .dl-btn { width: 100%; background: var(--wa-teal); color: white; font-size: 16px; margin-top: 20px; }\r\n\r\n \/* Preview Display *\/\r\n #preview { \r\n flex: 1; \r\n display: flex; \r\n justify-content: center; \r\n align-items: center; \r\n background: #0b0b0b; \r\n padding: 20px;\r\n }\r\n\r\n #capture-box {\r\n width: 375px; \r\n height: 780px;\r\n background: var(--wa-bg) url('https:\/\/user-images.githubusercontent.com\/15075759\/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');\r\n display: flex; \r\n flex-direction: column; \r\n position: relative; \r\n box-shadow: 0 0 50px rgba(0,0,0,0.9);\r\n flex-shrink: 0; \/* Prevents phone from squishing *\/\r\n }\r\n\r\n \/* UI Components *\/\r\n .sys-bar { background: var(--status-bar); height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: white; font-size: 12px; }\r\n .wa-header { background: var(--wa-teal); height: 62px; display: flex; align-items: center; padding: 0 10px; color: white; gap: 8px; }\r\n .pfp-wrap { width: 38px; height: 38px; border-radius: 50%; background: #ccc; overflow: hidden; position: relative; flex-shrink: 0; }\r\n .pfp-wrap img { width: 100%; height: 100%; object-fit: cover; }\r\n .contact-name { font-weight: 500; font-size: 17px; flex: 1; margin-left: 2px; }\r\n .header-icons { display: flex; gap: 18px; padding-right: 8px; opacity: 0.9; }\r\n\r\n .chat-area { flex: 1; padding: 12px; display: flex; flex-direction: column; overflow: hidden; }\r\n .msg-line { display: flex; width: 100%; margin-bottom: 4px; position: relative; }\r\n .msg-line.user-type { justify-content: flex-end; }\r\n \r\n .bubble { \r\n max-width: 85%; padding: 8px 10px; font-size: 14.5px; position: relative; \r\n box-shadow: 0 1px 0.5px rgba(0,0,0,0.15); border-radius: 8px; line-height: 1.4;\r\n }\r\n .cust-type .bubble { background: white; border-top-left-radius: 0; }\r\n .user-type .bubble { background: var(--wa-user); border-top-right-radius: 0; }\r\n \r\n .cust-type .bubble::before { content: \"\"; position: absolute; left: -8px; top: 0; border-right: 10px solid white; border-bottom: 10px solid transparent; }\r\n .user-type .bubble::before { content: \"\"; position: absolute; right: -8px; top: 0; border-left: 10px solid var(--wa-user); border-bottom: 10px solid transparent; }\r\n\r\n .b-meta { font-size: 10px; color: rgba(0,0,0,0.4); float: right; margin: 8px 0 0 10px; display: flex; align-items: center; gap: 2px; }\r\n .ticks { color: #34b7f1; font-size: 14px; font-weight: bold; }\r\n\r\n .wa-footer { padding: 6px 8px 10px 8px; display: flex; align-items: center; gap: 6px; }\r\n .input-wrapper { flex: 1; background: white; height: 48px; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }\r\n .input-pill { flex: 1; color: #888; font-size: 16px; margin-left: 10px; }\r\n .footer-icons { display: flex; gap: 14px; color: var(--icon-grey); align-items: center; }\r\n .mic-circ { width: 48px; height: 48px; background: var(--wa-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\r\n\r\n .nav-bar { background: black; height: 45px; display: flex; justify-content: space-around; align-items: center; opacity: 0.9; }\r\n .order-item { background: #f9f9f9; padding: 10px; margin-top: 5px; border: 1px solid #ddd; display: flex; justify-content: space-between; border-radius: 6px; font-size: 13px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"editor\">\r\n <h2 style=\"color:var(--wa-teal); margin-top:0;\">WP Pro Review<\/h2>\r\n <div class=\"section\">\r\n <label>1. Profile Identity<\/label>\r\n <input type=\"file\" accept=\"image\/*\" onchange=\"loadImg(event)\">\r\n <input type=\"text\" id=\"nameInp\" placeholder=\"Customer Name\" oninput=\"document.getElementById('nameDisp').innerText = this.value || 'John Doe'\">\r\n <\/div>\r\n <div class=\"section\">\r\n <label>2. Message Content<\/label>\r\n <textarea id=\"msgInp\" rows=\"3\" placeholder=\"Type customer feedback...\"><\/textarea>\r\n <div class=\"btn-group\">\r\n <button class=\"btn-cust\" onclick=\"addMsg('cust-type')\">Customer (Left Bubble)<\/button>\r\n <button class=\"btn-me\" onclick=\"addMsg('user-type')\">Me (Right Bubble)<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"manager\"><\/div>\r\n <button class=\"dl-btn\" onclick=\"download()\">Download Premium SS<\/button>\r\n<\/div>\r\n\r\n<div id=\"preview\">\r\n <div id=\"capture-box\">\r\n <div class=\"sys-bar\">\r\n <span id=\"time\">10:45<\/span>\r\n <div style=\"display:flex; gap:6px; align-items:center;\">\r\n <svg width=\"14\" height=\"14\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12.01 4.01L2 14h20L12.01 4.01z\"\/><\/svg>\r\n <span style=\"font-weight:bold;\">LTE<\/span>\r\n <svg width=\"16\" height=\"16\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wa-header\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\/><\/svg>\r\n <div class=\"pfp-wrap\"><img decoding=\"async\" id=\"pfp\" src=\"https:\/\/ui-avatars.com\/api\/?name=User&background=888&color=fff\"><\/div>\r\n <div class=\"contact-name\" id=\"nameDisp\">John Doe<\/div>\r\n <div class=\"header-icons\">\r\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"chat-area\" id=\"chat\">\r\n <div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>\r\n <\/div>\r\n\r\n <div class=\"wa-footer\">\r\n <div class=\"input-wrapper\">\r\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z\"\/><\/svg>\r\n <div class=\"input-pill\">Message<\/div>\r\n <div class=\"footer-icons\">\r\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\" style=\"transform: rotate(-45deg);\"><path d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.31 2.69 6 6 6s6-2.69 6-6V6h-1.5z\"\/><\/svg>\r\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3.2\"\/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mic-circ\">\r\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z\"\/><path d=\"M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"nav-bar\">\r\n <div style=\"width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:11px solid #bbb;\"><\/div>\r\n <div style=\"border:2px solid #bbb; width:15px; height:15px; border-radius:50%\"><\/div>\r\n <div style=\"border:2px solid #bbb; width:14px; height:14px; border-radius:3px\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n let msgs = [];\r\n function loadImg(e) {\r\n const reader = new FileReader();\r\n reader.onload = () => document.getElementById('pfp').src = reader.result;\r\n reader.readAsDataURL(e.target.files[0]);\r\n }\r\n function addMsg(type) {\r\n const txt = document.getElementById('msgInp').value;\r\n if(!txt) return;\r\n const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\r\n msgs.push({ type, txt, time });\r\n document.getElementById('msgInp').value = '';\r\n render();\r\n }\r\n function move(i, s) {\r\n const t = i + s;\r\n if(t >= 0 && t < msgs.length) { [msgs[i], msgs[t]] = [msgs[t], msgs[i]]; render(); }\r\n }\r\n function render() {\r\n const c = document.getElementById('chat');\r\n const m = document.getElementById('manager');\r\n c.innerHTML = '<div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>';\r\n m.innerHTML = '<label>Reorder Feedback<\/label>';\r\n msgs.forEach((x, i) => {\r\n const div = document.createElement('div');\r\n div.className = `msg-line ${x.type}`;\r\n div.innerHTML = `<div class=\"bubble\">${x.txt}<div class=\"b-meta\">${x.time}${x.type==='user-type'?'<span class=\"ticks\">\u2713\u2713<\/span>':''}<\/div><\/div>`;\r\n c.appendChild(div);\r\n\r\n const item = document.createElement('div');\r\n item.className = 'order-item';\r\n item.innerHTML = `<span>${x.txt.slice(0,20)}...<\/span><div><button onclick=\"move(${i},-1)\">\u25b2<\/button><button onclick=\"move(${i},1)\">\u25bc<\/button><\/div>`;\r\n m.appendChild(item);\r\n });\r\n }\r\n function download() {\r\n html2canvas(document.getElementById('capture-box'), { scale: 3, useCORS: true }).then(canv => {\r\n const a = document.createElement('a'); a.download = 'whatsapp_review_pro.png'; a.href = canv.toDataURL(); a.click();\r\n });\r\n }\r\n document.getElementById('time').innerText = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>WhatsApp Review Pro – Pixel Perfect WP Pro Review 1. Profile Identity 2. Message Content Customer (Left Bubble) Me (Right Bubble) Download Premium SS 10:45 LTE John Doe Today Message WhatsApp Review Pro – Responsive WP Pro Review 1. Profile Identity 2. Message Content Customer (Left Bubble) Me (Right Bubble) Download Premium SS 10:45 LTE John Doe Today Message<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","footer-sml-layout":"","ast-disable-related-posts":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/practiceweb.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":11,"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n WhatsApp Review Pro – Pixel Perfect<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <style>\n :root {\n --wa-teal: #008069;\n --wa-bg: #efe7de;\n --wa-user: #e7ffdb;\n --wa-cust: #ffffff;\n --status-bar: #006e5a;\n --icon-grey: #919191;\n }\n\n body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; display: flex; height: 100vh; background: #1a1a1b; }\n\n \/* Sidebar Control *\/\n #editor { width: 350px; background: #fff; padding: 20px; overflow-y: auto; border-right: 2px solid #000; z-index: 100; box-shadow: 5px 0 15px rgba(0,0,0,0.5); }\n .section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\n label { display: block; font-weight: bold; font-size: 11px; color: var(--wa-teal); text-transform: uppercase; margin-bottom: 8px; }\n input, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; margin-bottom: 10px; font-size: 14px; }\n \n .btn-group { display: flex; flex-direction: column; gap: 8px; }\n button { padding: 12px; cursor: pointer; border: none; border-radius: 8px; font-weight: bold; transition: 0.2s; }\n .btn-cust { background: #f1f1f1; border: 1px solid #ccc; }\n .btn-me { background: #25d366; color: white; }\n .dl-btn { width: 100%; background: var(--wa-teal); color: white; font-size: 16px; margin-top: 20px; }\n\n \/* Preview Display *\/\n #preview { flex: 1; display: flex; justify-content: center; align-items: center; background: #0b0b0b; }\n #capture-box {\n width: 375px; height: 780px;\n background: var(--wa-bg) url('https:\/\/user-images.githubusercontent.com\/15075759\/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');\n display: flex; flex-direction: column; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.9);\n }\n\n \/* UI Components *\/\n .sys-bar { background: var(--status-bar); height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: white; font-size: 12px; }\n \n .wa-header { background: var(--wa-teal); height: 62px; display: flex; align-items: center; padding: 0 10px; color: white; gap: 8px; }\n .pfp-wrap { width: 38px; height: 38px; border-radius: 50%; background: #ccc; overflow: hidden; position: relative; flex-shrink: 0; }\n .pfp-wrap img { width: 100%; height: 100%; object-fit: cover; }\n .contact-name { font-weight: 500; font-size: 17px; flex: 1; margin-left: 2px; }\n .header-icons { display: flex; gap: 18px; padding-right: 8px; opacity: 0.9; }\n\n .chat-area { flex: 1; padding: 12px; display: flex; flex-direction: column; overflow: hidden; }\n .msg-line { display: flex; width: 100%; margin-bottom: 4px; position: relative; }\n .msg-line.user-type { justify-content: flex-end; }\n \n .bubble { \n max-width: 85%; padding: 8px 10px; font-size: 14.5px; position: relative; \n box-shadow: 0 1px 0.5px rgba(0,0,0,0.15); border-radius: 8px; line-height: 1.4;\n }\n .cust-type .bubble { background: white; border-top-left-radius: 0; }\n .user-type .bubble { background: var(--wa-user); border-top-right-radius: 0; }\n \n \/* Message Tails *\/\n .cust-type .bubble::before { content: \"\"; position: absolute; left: -8px; top: 0; border-right: 10px solid white; border-bottom: 10px solid transparent; }\n .user-type .bubble::before { content: \"\"; position: absolute; right: -8px; top: 0; border-left: 10px solid var(--wa-user); border-bottom: 10px solid transparent; }\n\n .b-meta { font-size: 10px; color: rgba(0,0,0,0.4); float: right; margin: 8px 0 0 10px; display: flex; align-items: center; gap: 2px; }\n .ticks { color: #34b7f1; font-size: 14px; font-weight: bold; }\n\n .wa-footer { padding: 6px 8px 10px 8px; display: flex; align-items: center; gap: 6px; }\n .input-wrapper { flex: 1; background: white; height: 48px; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }\n .input-pill { flex: 1; color: #888; font-size: 16px; margin-left: 10px; }\n .footer-icons { display: flex; gap: 14px; color: var(--icon-grey); align-items: center; }\n .mic-circ { width: 48px; height: 48px; background: var(--wa-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }\n\n .nav-bar { background: black; height: 45px; display: flex; justify-content: space-around; align-items: center; opacity: 0.9; }\n .order-item { background: #f9f9f9; padding: 10px; margin-top: 5px; border: 1px solid #ddd; display: flex; justify-content: space-between; border-radius: 6px; font-size: 13px; }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"editor\">\n <h2 style=\"color:var(--wa-teal); margin-top:0;\">WP Pro Review<\/h2>\n <div class=\"section\">\n <label>1. Profile Identity<\/label>\n <input type=\"file\" accept=\"image\/*\" onchange=\"loadImg(event)\">\n <input type=\"text\" id=\"nameInp\" placeholder=\"Customer Name\" oninput=\"document.getElementById('nameDisp').innerText = this.value || 'John Doe'\">\n <\/div>\n <div class=\"section\">\n <label>2. Message Content<\/label>\n <textarea id=\"msgInp\" rows=\"3\" placeholder=\"Type customer feedback...\"><\/textarea>\n <div class=\"btn-group\">\n <button class=\"btn-cust\" onclick=\"addMsg('cust-type')\">Customer (Left Bubble)<\/button>\n <button class=\"btn-me\" onclick=\"addMsg('user-type')\">Me (Right Bubble)<\/button>\n <\/div>\n <\/div>\n <div id=\"manager\"><\/div>\n <button class=\"dl-btn\" onclick=\"download()\">Download Premium SS<\/button>\n<\/div>\n\n<div id=\"preview\">\n <div id=\"capture-box\">\n <div class=\"sys-bar\">\n <span id=\"time\">10:45<\/span>\n <div style=\"display:flex; gap:6px; align-items:center;\">\n <svg width=\"14\" height=\"14\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12.01 4.01L2 14h20L12.01 4.01z\"\/><\/svg>\n <span style=\"font-weight:bold;\">LTE<\/span>\n <svg width=\"16\" height=\"16\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"wa-header\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\/><\/svg>\n <div class=\"pfp-wrap\"><img decoding=\"async\" id=\"pfp\" src=\"https:\/\/ui-avatars.com\/api\/?name=User&background=888&color=fff\"><\/div>\n <div class=\"contact-name\" id=\"nameDisp\">John Doe<\/div>\n <div class=\"header-icons\">\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\/><\/svg>\n <svg width=\"20\" height=\"20\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"chat-area\" id=\"chat\">\n <div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>\n <\/div>\n\n <div class=\"wa-footer\">\n <div class=\"input-wrapper\">\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z\"\/><\/svg>\n <div class=\"input-pill\">Message<\/div>\n <div class=\"footer-icons\">\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\" style=\"transform: rotate(-45deg);\"><path d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.31 2.69 6 6 6s6-2.69 6-6V6h-1.5z\"\/><\/svg>\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3.2\"\/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"mic-circ\">\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z\"\/><path d=\"M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"nav-bar\">\n <div style=\"width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:11px solid #bbb;\"><\/div>\n <div style=\"border:2px solid #bbb; width:15px; height:15px; border-radius:50%\"><\/div>\n <div style=\"border:2px solid #bbb; width:14px; height:14px; border-radius:3px\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n let msgs = [];\n function loadImg(e) {\n const reader = new FileReader();\n reader.onload = () => document.getElementById('pfp').src = reader.result;\n reader.readAsDataURL(e.target.files[0]);\n }\n function addMsg(type) {\n const txt = document.getElementById('msgInp').value;\n if(!txt) return;\n const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\n msgs.push({ type, txt, time });\n document.getElementById('msgInp').value = '';\n render();\n }\n function move(i, s) {\n const t = i + s;\n if(t >= 0 && t < msgs.length) { [msgs[i], msgs[t]] = [msgs[t], msgs[i]]; render(); }\n }\n function render() {\n const c = document.getElementById('chat');\n const m = document.getElementById('manager');\n c.innerHTML = '<div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>';\n m.innerHTML = '<label>Reorder Feedback<\/label>';\n msgs.forEach((x, i) => {\n const div = document.createElement('div');\n div.className = `msg-line ${x.type}`;\n div.innerHTML = `<div class=\"bubble\">${x.txt}<div class=\"b-meta\">${x.time}${x.type==='user-type'?'<span class=\"ticks\">\u2713\u2713<\/span>':''}<\/div><\/div>`;\n c.appendChild(div);\n\n const item = document.createElement('div');\n item.className = 'order-item';\n item.innerHTML = `<span>${x.txt.slice(0,20)}...<\/span><div><button onclick=\"move(${i},-1)\">\u25b2<\/button><button onclick=\"move(${i},1)\">\u25bc<\/button><\/div>`;\n m.appendChild(item);\n });\n }\n function download() {\n html2canvas(document.getElementById('capture-box'), { scale: 3, useCORS: true }).then(canv => {\n const a = document.createElement('a'); a.download = 'whatsapp_review_pro.png'; a.href = canv.toDataURL(); a.click();\n });\n }\n document.getElementById('time').innerText = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t\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-ba3d4df e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"ba3d4df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa329d6 elementor-widget elementor-widget-html\" data-id=\"fa329d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>WhatsApp Review Pro - Responsive<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --wa-teal: #008069;\r\n --wa-bg: #efe7de;\r\n --wa-user: #e7ffdb;\r\n --wa-cust: #ffffff;\r\n --status-bar: #006e5a;\r\n --icon-grey: #919191;\r\n }\r\n\r\n body { \r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; \r\n margin: 0; \r\n display: flex; \r\n flex-direction: row; \/* Default side-by-side *\/\r\n min-height: 100vh; \r\n background: #1a1a1b; \r\n }\r\n\r\n \/* --- RESPONSIVE LAYOUT LOGIC --- *\/\r\n @media (max-width: 900px) {\r\n body { flex-direction: column; }\r\n #editor { width: 100% !important; border-right: none !important; border-bottom: 3px solid var(--wa-teal); }\r\n #preview { padding: 40px 10px; }\r\n }\r\n\r\n \/* Sidebar Control *\/\r\n #editor { \r\n width: 350px; \r\n background: #fff; \r\n padding: 20px; \r\n overflow-y: auto; \r\n border-right: 2px solid #000; \r\n z-index: 100; \r\n box-sizing: border-box;\r\n }\r\n\r\n .section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\r\n label { display: block; font-weight: bold; font-size: 11px; color: var(--wa-teal); text-transform: uppercase; margin-bottom: 8px; }\r\n input, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; margin-bottom: 10px; font-size: 14px; }\r\n \r\n .btn-group { display: flex; flex-direction: column; gap: 8px; }\r\n button { padding: 12px; cursor: pointer; border: none; border-radius: 8px; font-weight: bold; }\r\n .btn-cust { background: #f1f1f1; border: 1px solid #ccc; }\r\n .btn-me { background: #25d366; color: white; }\r\n .dl-btn { width: 100%; background: var(--wa-teal); color: white; font-size: 16px; margin-top: 20px; }\r\n\r\n \/* Preview Display *\/\r\n #preview { \r\n flex: 1; \r\n display: flex; \r\n justify-content: center; \r\n align-items: center; \r\n background: #0b0b0b; \r\n padding: 20px;\r\n }\r\n\r\n #capture-box {\r\n width: 375px; \r\n height: 780px;\r\n background: var(--wa-bg) url('https:\/\/user-images.githubusercontent.com\/15075759\/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');\r\n display: flex; \r\n flex-direction: column; \r\n position: relative; \r\n box-shadow: 0 0 50px rgba(0,0,0,0.9);\r\n flex-shrink: 0; \/* Prevents phone from squishing *\/\r\n }\r\n\r\n \/* UI Components *\/\r\n .sys-bar { background: var(--status-bar); height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: white; font-size: 12px; }\r\n .wa-header { background: var(--wa-teal); height: 62px; display: flex; align-items: center; padding: 0 10px; color: white; gap: 8px; }\r\n .pfp-wrap { width: 38px; height: 38px; border-radius: 50%; background: #ccc; overflow: hidden; position: relative; flex-shrink: 0; }\r\n .pfp-wrap img { width: 100%; height: 100%; object-fit: cover; }\r\n .contact-name { font-weight: 500; font-size: 17px; flex: 1; margin-left: 2px; }\r\n .header-icons { display: flex; gap: 18px; padding-right: 8px; opacity: 0.9; }\r\n\r\n .chat-area { flex: 1; padding: 12px; display: flex; flex-direction: column; overflow: hidden; }\r\n .msg-line { display: flex; width: 100%; margin-bottom: 4px; position: relative; }\r\n .msg-line.user-type { justify-content: flex-end; }\r\n \r\n .bubble { \r\n max-width: 85%; padding: 8px 10px; font-size: 14.5px; position: relative; \r\n box-shadow: 0 1px 0.5px rgba(0,0,0,0.15); border-radius: 8px; line-height: 1.4;\r\n }\r\n .cust-type .bubble { background: white; border-top-left-radius: 0; }\r\n .user-type .bubble { background: var(--wa-user); border-top-right-radius: 0; }\r\n \r\n .cust-type .bubble::before { content: \"\"; position: absolute; left: -8px; top: 0; border-right: 10px solid white; border-bottom: 10px solid transparent; }\r\n .user-type .bubble::before { content: \"\"; position: absolute; right: -8px; top: 0; border-left: 10px solid var(--wa-user); border-bottom: 10px solid transparent; }\r\n\r\n .b-meta { font-size: 10px; color: rgba(0,0,0,0.4); float: right; margin: 8px 0 0 10px; display: flex; align-items: center; gap: 2px; }\r\n .ticks { color: #34b7f1; font-size: 14px; font-weight: bold; }\r\n\r\n .wa-footer { padding: 6px 8px 10px 8px; display: flex; align-items: center; gap: 6px; }\r\n .input-wrapper { flex: 1; background: white; height: 48px; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }\r\n .input-pill { flex: 1; color: #888; font-size: 16px; margin-left: 10px; }\r\n .footer-icons { display: flex; gap: 14px; color: var(--icon-grey); align-items: center; }\r\n .mic-circ { width: 48px; height: 48px; background: var(--wa-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\r\n\r\n .nav-bar { background: black; height: 45px; display: flex; justify-content: space-around; align-items: center; opacity: 0.9; }\r\n .order-item { background: #f9f9f9; padding: 10px; margin-top: 5px; border: 1px solid #ddd; display: flex; justify-content: space-between; border-radius: 6px; font-size: 13px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"editor\">\r\n <h2 style=\"color:var(--wa-teal); margin-top:0;\">WP Pro Review<\/h2>\r\n <div class=\"section\">\r\n <label>1. Profile Identity<\/label>\r\n <input type=\"file\" accept=\"image\/*\" onchange=\"loadImg(event)\">\r\n <input type=\"text\" id=\"nameInp\" placeholder=\"Customer Name\" oninput=\"document.getElementById('nameDisp').innerText = this.value || 'John Doe'\">\r\n <\/div>\r\n <div class=\"section\">\r\n <label>2. Message Content<\/label>\r\n <textarea id=\"msgInp\" rows=\"3\" placeholder=\"Type customer feedback...\"><\/textarea>\r\n <div class=\"btn-group\">\r\n <button class=\"btn-cust\" onclick=\"addMsg('cust-type')\">Customer (Left Bubble)<\/button>\r\n <button class=\"btn-me\" onclick=\"addMsg('user-type')\">Me (Right Bubble)<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"manager\"><\/div>\r\n <button class=\"dl-btn\" onclick=\"download()\">Download Premium SS<\/button>\r\n<\/div>\r\n\r\n<div id=\"preview\">\r\n <div id=\"capture-box\">\r\n <div class=\"sys-bar\">\r\n <span id=\"time\">10:45<\/span>\r\n <div style=\"display:flex; gap:6px; align-items:center;\">\r\n <svg width=\"14\" height=\"14\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12.01 4.01L2 14h20L12.01 4.01z\"\/><\/svg>\r\n <span style=\"font-weight:bold;\">LTE<\/span>\r\n <svg width=\"16\" height=\"16\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wa-header\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\/><\/svg>\r\n <div class=\"pfp-wrap\"><img decoding=\"async\" id=\"pfp\" src=\"https:\/\/ui-avatars.com\/api\/?name=User&background=888&color=fff\"><\/div>\r\n <div class=\"contact-name\" id=\"nameDisp\">John Doe<\/div>\r\n <div class=\"header-icons\">\r\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"chat-area\" id=\"chat\">\r\n <div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>\r\n <\/div>\r\n\r\n <div class=\"wa-footer\">\r\n <div class=\"input-wrapper\">\r\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z\"\/><\/svg>\r\n <div class=\"input-pill\">Message<\/div>\r\n <div class=\"footer-icons\">\r\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\" style=\"transform: rotate(-45deg);\"><path d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.31 2.69 6 6 6s6-2.69 6-6V6h-1.5z\"\/><\/svg>\r\n <svg width=\"24\" height=\"24\" fill=\"#919191\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3.2\"\/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mic-circ\">\r\n <svg width=\"22\" height=\"22\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z\"\/><path d=\"M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"nav-bar\">\r\n <div style=\"width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:11px solid #bbb;\"><\/div>\r\n <div style=\"border:2px solid #bbb; width:15px; height:15px; border-radius:50%\"><\/div>\r\n <div style=\"border:2px solid #bbb; width:14px; height:14px; border-radius:3px\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n let msgs = [];\r\n function loadImg(e) {\r\n const reader = new FileReader();\r\n reader.onload = () => document.getElementById('pfp').src = reader.result;\r\n reader.readAsDataURL(e.target.files[0]);\r\n }\r\n function addMsg(type) {\r\n const txt = document.getElementById('msgInp').value;\r\n if(!txt) return;\r\n const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\r\n msgs.push({ type, txt, time });\r\n document.getElementById('msgInp').value = '';\r\n render();\r\n }\r\n function move(i, s) {\r\n const t = i + s;\r\n if(t >= 0 && t < msgs.length) { [msgs[i], msgs[t]] = [msgs[t], msgs[i]]; render(); }\r\n }\r\n function render() {\r\n const c = document.getElementById('chat');\r\n const m = document.getElementById('manager');\r\n c.innerHTML = '<div style=\"align-self:center; background:rgba(212,234,244,0.9); padding:5px 14px; border-radius:7px; font-size:11px; margin:10px 0; color:#555; text-transform:uppercase; letter-spacing:0.5px;\">Today<\/div>';\r\n m.innerHTML = '<label>Reorder Feedback<\/label>';\r\n msgs.forEach((x, i) => {\r\n const div = document.createElement('div');\r\n div.className = `msg-line ${x.type}`;\r\n div.innerHTML = `<div class=\"bubble\">${x.txt}<div class=\"b-meta\">${x.time}${x.type==='user-type'?'<span class=\"ticks\">\u2713\u2713<\/span>':''}<\/div><\/div>`;\r\n c.appendChild(div);\r\n\r\n const item = document.createElement('div');\r\n item.className = 'order-item';\r\n item.innerHTML = `<span>${x.txt.slice(0,20)}...<\/span><div><button onclick=\"move(${i},-1)\">\u25b2<\/button><button onclick=\"move(${i},1)\">\u25bc<\/button><\/div>`;\r\n m.appendChild(item);\r\n });\r\n }\r\n function download() {\r\n html2canvas(document.getElementById('capture-box'), { scale: 3, useCORS: true }).then(canv => {\r\n const a = document.createElement('a'); a.download = 'whatsapp_review_pro.png'; a.href = canv.toDataURL(); a.click();\r\n });\r\n }\r\n document.getElementById('time').innerText = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>WhatsApp Review Pro – Pixel Perfect WP Pro Review 1. Profile Identity 2. Message Content Customer (Left Bubble) Me (Right Bubble) Download Premium SS 10:45 LTE John Doe Today Message WhatsApp Review Pro – Responsive WP Pro Review 1. Profile Identity 2. Message Content Customer (Left Bubble) Me (Right Bubble) Download Premium SS 10:45 LTE John Doe Today Message<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","footer-sml-layout":"","ast-disable-related-posts":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/practiceweb.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":11,"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/practiceweb.store\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/practiceweb.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}