Professional Certificate Generator<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n <style>\n :root {\n --wp-cert-bg: #f8fafc;\n --wp-cert-card-bg: rgba(255, 255, 255, 0.95);\n --wp-cert-border-color: #e2e8f0;\n --wp-cert-text-main: #0f172a;\n --wp-cert-text-sub: #475569;\n --wp-cert-accent: #2563eb;\n --wp-cert-accent-hover: #1d4ed8;\n --wp-cert-success: #10b981;\n --wp-cert-danger: #ef4444;\n --wp-cert-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --wp-cert-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --wp-cert-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --wp-cert-font: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n }\n\n \/* Namespace wrapper *\/\n .wp-cert-app-container {\n box-sizing: border-box;\n font-family: var(--wp-cert-font);\n background-color: var(--wp-cert-bg);\n color: var(--wp-cert-text-main);\n min-height: 100vh;\n padding: 2rem 1rem;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n line-height: 1.5;\n }\n\n .wp-cert-app-container * {\n box-sizing: border-box;\n }\n\n \/* Upper Controls \/ Navbar *\/\n .wp-cert-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--wp-cert-card-bg);\n padding: 1.25rem 2rem;\n border-radius: 16px;\n box-shadow: var(--wp-cert-shadow);\n border: 1px solid var(--wp-cert-border-color);\n }\n\n .wp-cert-title-area h1 {\n font-size: 1.5rem;\n font-weight: 800;\n margin: 0;\n background: linear-gradient(135deg, #1e293b, #2563eb);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .wp-cert-title-area p {\n font-size: 0.875rem;\n color: var(--wp-cert-text-sub);\n margin: 0.25rem 0 0 0;\n }\n\n .wp-cert-global-actions {\n display: flex;\n gap: 0.75rem;\n }\n\n \/* Buttons styling *\/\n .wp-cert-btn {\n font-size: 0.875rem;\n font-weight: 600;\n padding: 0.625rem 1.25rem;\n border-radius: 10px;\n border: 1px solid var(--wp-cert-border-color);\n background-color: #fff;\n color: var(--wp-cert-text-main);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: all 0.2s ease-in-out;\n }\n\n .wp-cert-btn:hover {\n transform: translateY(-1px);\n box-shadow: var(--wp-cert-shadow-sm);\n border-color: #cbd5e1;\n }\n\n .wp-cert-btn-primary {\n background-color: var(--wp-cert-accent);\n color: #ffffff;\n border: none;\n }\n\n .wp-cert-btn-primary:hover {\n background-color: var(--wp-cert-accent-hover);\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);\n }\n\n .wp-cert-btn-danger {\n background-color: #fef2f2;\n color: var(--wp-cert-danger);\n border-color: #fca5a5;\n }\n\n .wp-cert-btn-danger:hover {\n background-color: #fee2e2;\n }\n\n \/* Workspace Grid *\/\n .wp-cert-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n align-items: start;\n }\n\n @media (min-width: 1024px) {\n .wp-cert-grid {\n grid-template-columns: 450px 1fr;\n }\n }\n\n \/* Sidebar Editor Panels *\/\n .wp-cert-sidebar {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n .wp-cert-card {\n background: var(--wp-cert-card-bg);\n border: 1px solid var(--wp-cert-border-color);\n border-radius: 16px;\n box-shadow: var(--wp-cert-shadow);\n overflow: hidden;\n }\n\n .wp-cert-card-header {\n padding: 1.25rem 1.5rem;\n border-bottom: 1px solid var(--wp-cert-border-color);\n font-weight: 700;\n font-size: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8fafc;\n }\n\n .wp-cert-card-body {\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n \/* Form Controls *\/\n .wp-cert-field-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .wp-cert-field-group label {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--wp-cert-text-sub);\n }\n\n .wp-cert-input, .wp-cert-select {\n width: 100%;\n padding: 0.625rem 0.875rem;\n font-size: 0.875rem;\n border-radius: 8px;\n border: 1px solid var(--wp-cert-border-color);\n outline: none;\n transition: border-color 0.15s ease-in-out;\n }\n\n .wp-cert-input:focus, .wp-cert-select:focus {\n border-color: var(--wp-cert-accent);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n }\n\n .wp-cert-row-2col {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n }\n\n \/* File input custom styles *\/\n .wp-cert-file-upload {\n position: relative;\n display: inline-block;\n width: 100%;\n }\n\n .wp-cert-file-upload input[type=\"file\"] {\n position: absolute;\n left: 0;\n top: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n }\n\n .wp-cert-file-label {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.625rem 0.875rem;\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--wp-cert-accent);\n background: #eff6ff;\n border: 1px dashed #bfdbfe;\n border-radius: 8px;\n text-align: center;\n }\n\n \/* Tabs inside Customize Panel *\/\n .wp-cert-tabs {\n display: flex;\n border-bottom: 1px solid var(--wp-cert-border-color);\n background: #f1f5f9;\n }\n\n .wp-cert-tab {\n flex: 1;\n padding: 0.75rem;\n text-align: center;\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--wp-cert-text-sub);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n }\n\n .wp-cert-tab.active {\n color: var(--wp-cert-accent);\n border-bottom-color: var(--wp-cert-accent);\n background: #fff;\n }\n\n .wp-cert-tab-content {\n display: none;\n padding: 1.25rem;\n }\n\n .wp-cert-tab-content.active {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n \/* Certificate Preview Workspace Area *\/\n .wp-cert-preview-column {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n position: sticky;\n top: 2rem;\n }\n\n .wp-cert-preview-actions-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--wp-cert-card-bg);\n padding: 0.875rem 1.5rem;\n border-radius: 12px;\n border: 1px solid var(--wp-cert-border-color);\n box-shadow: var(--wp-cert-shadow-sm);\n }\n\n .wp-cert-preview-controls {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n }\n\n \/* Search Filter bar *\/\n .wp-cert-search-bar {\n position: relative;\n margin-bottom: 0.5rem;\n }\n\n \/* Templates List *\/\n .wp-cert-template-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n gap: 0.75rem;\n max-height: 240px;\n overflow-y: auto;\n padding: 0.25rem;\n }\n\n .wp-cert-template-item {\n border: 1px solid var(--wp-cert-border-color);\n border-radius: 8px;\n padding: 0.5rem;\n cursor: pointer;\n text-align: center;\n transition: all 0.2s ease;\n background: #ffffff;\n }\n\n .wp-cert-template-item:hover, .wp-cert-template-item.active {\n border-color: var(--wp-cert-accent);\n background: #f0fdf4;\n box-shadow: var(--wp-cert-shadow-sm);\n }\n\n .wp-cert-template-thumb {\n aspect-ratio: 1.414;\n background: #e2e8f0;\n border-radius: 4px;\n margin-bottom: 0.35rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.625rem;\n font-weight: 700;\n color: #64748b;\n border: 1px solid #cbd5e1;\n }\n\n .wp-cert-template-title {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--wp-cert-text-main);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n \/* Certificate Canvas Area container styling *\/\n .wp-cert-canvas-container {\n width: 100%;\n overflow: auto;\n background: #64748b;\n border-radius: 16px;\n padding: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #475569;\n box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);\n min-height: 480px;\n }\n\n \/* The Live A4 Landscape Canvas Frame *\/\n .wp-cert-canvas-frame {\n width: 842px; \/* Standard A4 landscape aspect ratio scaling *\/\n height: 595px;\n background-color: #ffffff;\n position: relative;\n flex-shrink: 0;\n box-shadow: var(--wp-cert-shadow-lg);\n border-radius: 4px;\n transform-origin: center center;\n transition: transform 0.2s ease-out;\n overflow: hidden;\n user-select: none;\n }\n\n \/* Portrait template option dynamic class *\/\n .wp-cert-canvas-frame.portrait {\n width: 595px;\n height: 842px;\n }\n\n \/* Certificate Template Decorative Background Elements inside iframe\/preview *\/\n .wp-cert-art-border {\n position: absolute;\n top: 20px;\n left: 20px;\n right: 20px;\n bottom: 20px;\n border: 4px solid #1e293b;\n pointer-events: none;\n box-sizing: border-box;\n }\n\n .wp-cert-art-border-double {\n position: absolute;\n top: 26px;\n left: 26px;\n right: 26px;\n bottom: 26px;\n border: 1px solid #c5a880;\n pointer-events: none;\n box-sizing: border-box;\n }\n\n .wp-cert-corner-decor {\n position: absolute;\n width: 30px;\n height: 30px;\n border-color: #c5a880;\n border-style: solid;\n pointer-events: none;\n }\n .wp-cert-corner-top-left { top: 32px; left: 32px; border-width: 3px 0 0 3px; }\n .wp-cert-corner-top-right { top: 32px; right: 32px; border-width: 3px 3px 0 0; }\n .wp-cert-corner-bottom-left { bottom: 32px; left: 32px; border-width: 0 0 3px 3px; }\n .wp-cert-corner-bottom-right { bottom: 32px; right: 32px; border-width: 0 3px 3px 0; }\n\n \/* Draggable elements on Canvas *\/\n .wp-cert-drag-item {\n position: absolute;\n cursor: move;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: 1px dashed transparent;\n padding: 4px;\n transition: outline-color 0.15s ease-in-out;\n }\n\n .wp-cert-drag-item:hover, .wp-cert-drag-item.selected {\n outline-color: var(--wp-cert-accent);\n }\n\n .wp-cert-drag-item-inner {\n text-align: center;\n width: 100%;\n height: 100%;\n white-space: pre-wrap;\n pointer-events: none; \/* Let the parent container handle drag events *\/\n }\n\n \/* Specific placement on canvas initialization default templates *\/\n .wp-cert-pos-title { top: 12%; left: 10%; width: 80%; }\n .wp-cert-pos-subtitle { top: 22%; left: 15%; width: 70%; }\n .wp-cert-pos-recipient { top: 34%; left: 15%; width: 70%; }\n .wp-cert-pos-description { top: 48%; left: 15%; width: 70%; }\n .wp-cert-pos-course { top: 60%; left: 15%; width: 70%; }\n \n \/* Dual footer structures *\/\n .wp-cert-pos-meta-left { bottom: 12%; left: 10%; width: 25%; }\n .wp-cert-pos-meta-center { bottom: 8%; left: 37.5%; width: 25%; }\n .wp-cert-pos-meta-right { bottom: 12%; right: 10%; width: 25%; }\n\n \/* Media Elements *\/\n .wp-cert-media-logo {\n max-height: 70px;\n max-width: 150px;\n object-fit: contain;\n }\n\n .wp-cert-media-sig {\n max-height: 50px;\n max-width: 140px;\n object-fit: contain;\n }\n\n .wp-cert-media-seal {\n max-height: 80px;\n max-width: 80px;\n object-fit: contain;\n }\n\n \/* SVG icon style helper *\/\n .wp-cert-icon {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n\n \/* Undo\/Redo Controls overlay layout *\/\n .wp-cert-history-bar {\n display: flex;\n gap: 0.5rem;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"wp-cert-app-container\">\n\n <header class=\"wp-cert-header\">\n <div class=\"wp-cert-title-area\">\n <h1>Premium Certificate Engine<\/h1>\n <p>Design, customize and export high-resolution A4 awards instantly<\/p>\n <\/div>\n <div class=\"wp-cert-global-actions\">\n <div class=\"wp-cert-history-bar\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-undo\" title=\"Undo (Ctrl+Z)\">\n <svg class=\"wp-cert-icon\" viewBox=\"0 0 24 24\"><path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.25 8 12.5 8z\"\/><\/svg>\n <\/button>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-redo\" title=\"Redo (Ctrl+Y)\">\n <svg class=\"wp-cert-icon\" viewBox=\"0 0 24 24\"><path d=\"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.75 0-8.58 3.03-9.97 7.22l2.37.78c1.05-3.19 4.06-5.5 7.6-5.5 1.96 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z\"\/><\/svg>\n <\/button>\n <\/div>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-reset\">Reset<\/button>\n <button class=\"wp-cert-btn wp-cert-btn-primary\" id=\"wp-cert-btn-export-pdf\">\n <svg class=\"wp-cert-icon\" viewBox=\"0 0 24 24\"><path fill=\"#fff\" d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\"\/><\/svg>\n Export High-Res PDF\n <\/button>\n <\/div>\n <\/header>\n\n <main class=\"wp-cert-grid\">\n\n <div class=\"wp-cert-sidebar\">\n\n <div class=\"wp-cert-card\">\n <div class=\"wp-cert-card-header\">\n <span>1. Choose Template Layout<\/span>\n <span style=\"font-size:0.75rem; color:var(--wp-cert-accent); font-weight:700;\" id=\"wp-cert-layout-indicator\">Landscape<\/span>\n <\/div>\n <div class=\"wp-cert-card-body\">\n <div class=\"wp-cert-search-bar\">\n <input type=\"text\" class=\"wp-cert-input\" id=\"wp-cert-search-templates\" placeholder=\"Search templates (e.g., Course, Award)...\">\n <\/div>\n <div class=\"wp-cert-template-grid\" id=\"wp-cert-template-list\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-card\">\n <div class=\"wp-cert-card-header\">\n <span>2. Customize Fields<\/span>\n <\/div>\n \n <div class=\"wp-cert-tabs\">\n <div class=\"wp-cert-tab active\" data-tab-target=\"wp-cert-tab-content\">Content<\/div>\n <div class=\"wp-cert-tab\" data-tab-target=\"wp-cert-tab-style\">Styling<\/div>\n <div class=\"wp-cert-tab\" data-tab-target=\"wp-cert-tab-media\">Images & Verification<\/div>\n <\/div>\n\n <div class=\"wp-cert-tab-content active\" id=\"wp-cert-tab-content\">\n <div class=\"wp-cert-field-group\">\n <label>Certificate Header \/ Title<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"title\" value=\"CERTIFICATE OF APPRECIATION\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Sub-text\/Purpose<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"subtitle\" value=\"This is proudly presented to\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Recipient Full Name<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"recipient\" value=\"Jane Doe\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Presentation Description<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"description\" value=\"for successfully completing all requirements of the professional program\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Course \/ Achievement Name<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"course\" value=\"Advanced Full-Stack Engineering 2026\">\n <\/div>\n \n <div class=\"wp-cert-row-2col\">\n <div class=\"wp-cert-field-group\">\n <label>Issue Date<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"issue-date\" value=\"July 16, 2026\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Certificate ID<\/label>\n <div style=\"display:flex; gap:0.25rem;\">\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" id=\"wp-cert-field-id\" data-field=\"cert-id\" value=\"CERT-2026-9912\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-random-id\" style=\"padding:0.5rem;\" title=\"Random ID\">\ud83c\udfb2<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-row-2col\">\n <div class=\"wp-cert-field-group\">\n <label>Authorized Signatory<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"signatory\" value=\"Dr. Robert Carter\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Signatory Title<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"signatory-title\" value=\"Managing Director\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-tab-content\" id=\"wp-cert-tab-style\">\n <div class=\"wp-cert-field-group\">\n <label>Primary Theme Color<\/label>\n <input type=\"color\" class=\"wp-cert-input\" id=\"wp-cert-color-theme\" value=\"#1e293b\" style=\"height:40px; padding:2px; cursor:pointer;\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Accent Highlights Color<\/label>\n <input type=\"color\" class=\"wp-cert-input\" id=\"wp-cert-color-accent\" value=\"#c5a880\" style=\"height:40px; padding:2px; cursor:pointer;\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Typography Font Family<\/label>\n <select class=\"wp-cert-select\" id=\"wp-cert-font-family\">\n <option value=\"'Georgia', serif\">Georgia (Elegant Serif)<\/option>\n <option value=\"'Times New Roman', serif\">Times New Roman<\/option>\n <option value=\"system-ui, sans-serif\">System Sans-Serif<\/option>\n <option value=\"'Courier New', monospace\">Courier (Modern tech)<\/option>\n <\/select>\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Corner Accent Style<\/label>\n <select class=\"wp-cert-select\" id=\"wp-cert-corner-style\">\n <option value=\"classic\">Ornate Corners<\/option>\n <option value=\"minimal\">Minimal Corners<\/option>\n <option value=\"none\">No Corner Ornaments<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-tab-content\" id=\"wp-cert-tab-media\">\n <div class=\"wp-cert-field-group\">\n <label>Brand Logo Image<\/label>\n <div class=\"wp-cert-file-upload\">\n <span class=\"wp-cert-file-label\">Choose Logo PNG \/ JPG<\/span>\n <input type=\"file\" id=\"wp-cert-upload-logo\" accept=\"image\/*\">\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-field-group\">\n <label>Signature Image<\/label>\n <div class=\"wp-cert-file-upload\">\n <span class=\"wp-cert-file-label\">Choose Signature Graphic<\/span>\n <input type=\"file\" id=\"wp-cert-upload-sig\" accept=\"image\/*\">\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-field-group\">\n <label>Seal \/ Badge \/ Stamp<\/label>\n <div class=\"wp-cert-file-upload\">\n <span class=\"wp-cert-file-label\">Upload Official Seal<\/span>\n <input type=\"file\" id=\"wp-cert-upload-seal\" accept=\"image\/*\">\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-field-group\">\n <label>Verification Link QR Code URL<\/label>\n <input type=\"url\" class=\"wp-cert-input\" id=\"wp-cert-field-qr\" value=\"https:\/\/verify.org\/id\/9912\">\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <div class=\"wp-cert-preview-column\">\n \n <div class=\"wp-cert-preview-actions-bar\">\n <div class=\"wp-cert-preview-controls\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-zoom-out\" title=\"Zoom Out\">–<\/button>\n <span id=\"wp-cert-zoom-indicator\" style=\"font-size:0.8125rem; font-weight:700;\">85%<\/span>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-zoom-in\" title=\"Zoom In\">+<\/button>\n <\/div>\n <div style=\"display:flex; gap:0.5rem;\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-orientation\" title=\"Toggle Orientation\">\ud83d\udd04 Flip Layout<\/button>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-print\">Print<\/button>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-canvas-container\">\n <div class=\"wp-cert-canvas-frame\" id=\"wp-cert-canvas\">\n \n <div class=\"wp-cert-art-border\" id=\"wp-canvas-element-border-primary\"><\/div>\n <div class=\"wp-cert-art-border-double\" id=\"wp-canvas-element-border-secondary\"><\/div>\n\n <div class=\"wp-cert-corner-decor wp-cert-corner-top-left wp-canvas-corner\"><\/div>\n <div class=\"wp-cert-corner-decor wp-cert-corner-top-right wp-canvas-corner\"><\/div>\n <div class=\"wp-cert-corner-decor wp-cert-corner-bottom-left wp-canvas-corner\"><\/div>\n <div class=\"wp-cert-corner-decor wp-cert-corner-bottom-right wp-canvas-corner\"><\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-title\" data-element-id=\"title\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-title\" style=\"font-size:24px; font-weight:800; letter-spacing:1px; color:#1e293b;\">\n CERTIFICATE OF APPRECIATION\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-subtitle\" data-element-id=\"subtitle\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-subtitle\" style=\"font-size:14px; font-style:italic; color:#475569;\">\n This is proudly presented to\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-recipient\" data-element-id=\"recipient\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-recipient\" style=\"font-size:32px; font-weight:700; border-bottom:1px solid #cbd5e1; padding-bottom:8px; display:inline-block; width:100%; color:#1e293b;\">\n Jane Doe\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-description\" data-element-id=\"description\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-description\" style=\"font-size:12px; color:#475569;\">\n for successfully completing all requirements of the professional program\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-course\" data-element-id=\"course\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-course\" style=\"font-size:18px; font-weight:700; color:#1d4ed8;\">\n Advanced Full-Stack Engineering 2026\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-meta-left\" data-element-id=\"signatory-area\">\n <div class=\"wp-cert-drag-item-inner\" style=\"display:flex; flex-direction:column; align-items:center;\">\n <div id=\"wp-canvas-container-sig\" style=\"height:50px; display:flex; align-items:flex-end; margin-bottom:4px;\">\n <div style=\"font-size:18px; font-family:'Georgia'; color:#64748b; font-style:italic;\" id=\"wp-canvas-raw-sig-text\">Robert Carter<\/div>\n <\/div>\n <div style=\"width:130px; border-top:1px solid #94a3b8; margin:2px 0;\"><\/div>\n <div id=\"wp-canvas-text-signatory\" style=\"font-size:11px; font-weight:700; color:#1e293b;\">Dr. Robert Carter<\/div>\n <div id=\"wp-canvas-text-signatory-title\" style=\"font-size:9px; color:#64748b;\">Managing Director<\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-meta-center\" data-element-id=\"seal-area\">\n <div class=\"wp-cert-drag-item-inner\" style=\"display:flex; justify-content:center; align-items:center; height:80px;\">\n <img decoding=\"async\" src=\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='%23c5a880' stroke-width='3'\/><circle cx='50' cy='50' r='38' fill='none' stroke='%23c5a880' stroke-dasharray='5,3'\/><path d='M35,35 L65,65 M65,35 L35,65' stroke='%23c5a880' stroke-width='2'\/><\/svg>” class=”wp-cert-media-seal” id=”wp-canvas-img-seal” alt=”Seal”>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-meta-right\" data-element-id=\"meta-right\">\n <div class=\"wp-cert-drag-item-inner\" style=\"display:flex; flex-direction:column; align-items:center; gap:4px;\">\n <div id=\"wp-canvas-qr-target\" style=\"width:50px; height:50px; background:#fff; padding:2px; border:1px solid #e2e8f0;\"><\/div>\n <div style=\"font-size:9px; color:#475569;\">\n ID: <span id=\"wp-canvas-text-cert-id\" style=\"font-weight:700;\">CERT-2026-9912<\/span>\n <\/div>\n <div style=\"font-size:9px; color:#475569;\">\n Date: <span id=\"wp-canvas-text-issue-date\" style=\"font-weight:700;\">July 16, 2026<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/main>\n\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ Application state\n const wpCertState = {\n zoom: 0.85,\n orientation: 'landscape', \/\/ 'landscape' or 'portrait'\n selectedElement: null,\n themeColor: '#1e293b',\n accentColor: '#c5a880',\n activeTab: 'wp-cert-tab-content',\n fontFamily: \"'Georgia', serif\",\n cornerStyle: 'classic',\n qrUrl: 'https:\/\/verify.org\/id\/9912',\n \n \/\/ Undo \/ Redo history\n history: [],\n historyIndex: -1,\n\n \/\/ Available Certificate templates meta definition array\n templates: [\n { id: 'apprec', title: 'Appreciation', type: 'Academic Certificate', textTitle: 'CERTIFICATE OF APPRECIATION', subtitle: 'This award is proudly presented to', desc: 'for outstanding contributions and dedication shown during operations.', color: '#1e293b', accent: '#c5a880' },\n { id: 'course', title: 'Course Completion', type: 'Course Completion', textTitle: 'CERTIFICATE OF COMPLETION', subtitle: 'This certifies that', desc: 'has successfully completed all assignments and curriculum targets for', color: '#0f172a', accent: '#10b981' },\n { id: 'achieve', title: 'Achievement', type: 'Achievement Certificate', textTitle: 'CERTIFICATE OF ACHIEVEMENT', subtitle: 'Highly Recognition presented to', desc: 'for demonstrating excellence and exceeding organizational benchmarks in', color: '#1e3a8a', accent: '#f59e0b' },\n { id: 'intern', title: 'Internship', type: 'Internship Certificate', textTitle: 'INTERNSHIP CERTIFICATE', subtitle: 'This is to certify that', desc: 'has finished their practical industry internship curriculum with honors as a', color: '#111827', accent: '#3b82f6' },\n { id: 'work', title: 'Workshop', type: 'Workshop Certificate', textTitle: 'WORKSHOP PARTICIPATION', subtitle: 'This verifies the active training of', desc: 'for actively attending the intensive masterclass training program', color: '#312e81', accent: '#8b5cf6' },\n { id: 'train', title: 'Training Program', type: 'Training Certificate', textTitle: 'CERTIFICATE OF TRAINING', subtitle: 'Proudly awarded to', desc: 'for completing advanced professional orientation development in', color: '#064e3b', accent: '#a3e635' },\n { id: 'award', title: 'Employee Award', type: 'Employee Award', textTitle: 'EMPLOYEE OF THE MONTH', subtitle: 'Outstanding Excellence award presented to', desc: 'in recognition of valuable contribution and high team motivation at', color: '#4c1d95', accent: '#ec4899' },\n { id: 'volun', title: 'Volunteer', type: 'Volunteer Certificate', textTitle: 'VOLUNTEER RECOGNITION', subtitle: 'In sincere gratitude to', desc: 'for selflessly dedicating time, spirit, and valuable expertise to support', color: '#7c2d12', accent: '#f97316' },\n { id: 'sports', title: 'Sports Award', type: 'Sports Certificate', textTitle: 'ATHLETIC AWARD OF HONOR', subtitle: 'This is awarded to', desc: 'for presenting excellent sportsmanship and winning first place in the tournament', color: '#1e1b4b', accent: '#e11d48' },\n { id: 'general', title: 'General Award', type: 'Participation Certificate', textTitle: 'CERTIFICATE OF PARTICIPATION', subtitle: 'Warmly presented to', desc: 'for joining and bringing amazing positive energy to our yearly meet-up', color: '#022c22', accent: '#f43f5e' }\n ]\n };\n\n \/\/ DOM Nodes lookup\n const wpCertNodes = {\n canvas: document.getElementById('wp-cert-canvas'),\n templateList: document.getElementById('wp-cert-template-list'),\n searchTemplates: document.getElementById('wp-cert-search-templates'),\n themeColorInput: document.getElementById('wp-cert-color-theme'),\n accentColorInput: document.getElementById('wp-cert-color-accent'),\n fontFamilySelect: document.getElementById('wp-cert-font-family'),\n cornerStyleSelect: document.getElementById('wp-cert-corner-style'),\n qrFieldInput: document.getElementById('wp-cert-field-qr'),\n zoomIndicator: document.getElementById('wp-cert-zoom-indicator'),\n orientationBtn: document.getElementById('wp-cert-btn-orientation'),\n btnExportPdf: document.getElementById('wp-cert-btn-export-pdf'),\n btnPrint: document.getElementById('wp-cert-btn-print'),\n btnRandomId: document.getElementById('wp-cert-btn-random-id'),\n btnUndo: document.getElementById('wp-cert-btn-undo'),\n btnRedo: document.getElementById('wp-cert-btn-redo'),\n btnReset: document.getElementById('wp-cert-btn-reset'),\n btnZoomIn: document.getElementById('wp-cert-btn-zoom-in'),\n btnZoomOut: document.getElementById('wp-cert-btn-zoom-out'),\n qrTarget: document.getElementById('wp-canvas-qr-target')\n };\n\n let wpCertQrCodeInstance = null;\n\n \/\/ Initialize Engine\n function wpCertInit() {\n wpCertSetupTabs();\n wpCertSetupTemplateFilter();\n wpCertRenderTemplates(wpCertState.templates);\n wpCertSetupLiveFields();\n wpCertSetupMediaUploads();\n wpCertSetupDraggables();\n wpCertSetupZoomControls();\n wpCertSetupThemeInputs();\n wpCertUpdateQR();\n\n \/\/ Button handlers\n wpCertNodes.orientationBtn.addEventListener('click', wpCertToggleOrientation);\n wpCertNodes.btnExportPdf.addEventListener('click', wpCertExportPDF);\n wpCertNodes.btnPrint.addEventListener('click', wpCertPrintCertificate);\n wpCertNodes.btnRandomId.addEventListener('click', wpCertGenerateRandomId);\n wpCertNodes.btnUndo.addEventListener('click', wpCertUndoAction);\n wpCertNodes.btnRedo.addEventListener('click', wpCertRedoAction);\n wpCertNodes.btnReset.addEventListener('click', wpCertResetWorkspace);\n\n \/\/ Capture initial state for undo\n wpCertCaptureHistory();\n wpCertApplyZoom();\n }\n\n \/\/ Tabs control switching\n function wpCertSetupTabs() {\n const tabs = document.querySelectorAll('.wp-cert-tab');\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.wp-cert-tab-content').forEach(c => c.classList.remove('active'));\n \n tab.classList.add('active');\n const target = tab.getAttribute('data-tab-target');\n document.getElementById(target).classList.add('active');\n });\n });\n }\n\n \/\/ Search and Render templates on sidebar list\n function wpCertSetupTemplateFilter() {\n wpCertNodes.searchTemplates.addEventListener('input', (e) => {\n const query = e.target.value.toLowerCase();\n const filtered = wpCertState.templates.filter(t => \n t.title.toLowerCase().includes(query) || \n t.type.toLowerCase().includes(query)\n );\n wpCertRenderTemplates(filtered);\n });\n }\n\n function wpCertRenderTemplates(list) {\n wpCertNodes.templateList.innerHTML = '';\n list.forEach(t => {\n const item = document.createElement('div');\n item.className = 'wp-cert-template-item';\n item.innerHTML = `\n <div class=\"wp-cert-template-thumb\">${t.title.substring(0,3).toUpperCase()}<\/div>\n <div class=\"wp-cert-template-title\">${t.title}<\/div>\n `;\n item.addEventListener('click', () => {\n document.querySelectorAll('.wp-cert-template-item').forEach(el => el.classList.remove('active'));\n item.classList.add('active');\n wpCertLoadTemplate(t);\n });\n wpCertNodes.templateList.appendChild(item);\n });\n }\n\n \/\/ Load templates instantly into real-time design attributes\n function wpCertLoadTemplate(tmpl) {\n \/\/ Set state colors & apply\n wpCertState.themeColor = tmpl.color;\n wpCertState.accentColor = tmpl.accent;\n wpCertNodes.themeColorInput.value = tmpl.color;\n wpCertNodes.accentColorInput.value = tmpl.accent;\n\n \/\/ Set layout details\n document.querySelector('[data-field=\"title\"]').value = tmpl.textTitle;\n document.querySelector('[data-field=\"subtitle\"]').value = tmpl.subtitle;\n document.querySelector('[data-field=\"description\"]').value = tmpl.desc;\n\n wpCertSyncInputToCanvas();\n wpCertApplyColorsAndStyles();\n wpCertCaptureHistory();\n }\n\n \/\/ Live update fields synchronization\n function wpCertSetupLiveFields() {\n const fields = document.querySelectorAll('.wp-cert-live-field');\n fields.forEach(field => {\n field.addEventListener('input', () => {\n wpCertSyncInputToCanvas();\n });\n });\n }\n\n function wpCertSyncInputToCanvas() {\n document.getElementById('wp-canvas-text-title').innerText = document.querySelector('[data-field=\"title\"]').value;\n document.getElementById('wp-canvas-text-subtitle').innerText = document.querySelector('[data-field=\"subtitle\"]').value;\n document.getElementById('wp-canvas-text-recipient').innerText = document.querySelector('[data-field=\"recipient\"]').value;\n document.getElementById('wp-canvas-text-description').innerText = document.querySelector('[data-field=\"description\"]').value;\n document.getElementById('wp-canvas-text-course').innerText = document.querySelector('[data-field=\"course\"]').value;\n \n document.getElementById('wp-canvas-text-cert-id').innerText = document.querySelector('[data-field=\"cert-id\"]').value;\n document.getElementById('wp-canvas-text-issue-date').innerText = document.querySelector('[data-field=\"issue-date\"]').value;\n\n document.getElementById('wp-canvas-text-signatory').innerText = document.querySelector('[data-field=\"signatory\"]').value;\n document.getElementById('wp-canvas-text-signatory-title').innerText = document.querySelector('[data-field=\"signatory-title\"]').value;\n \n \/\/ Sigs alternative raw text updating\n document.getElementById('wp-canvas-raw-sig-text').innerText = document.querySelector('[data-field=\"signatory\"]').value;\n }\n\n \/\/ Custom uploads loader (Base64 wrapper conversion)\n function wpCertSetupMediaUploads() {\n wpCertRegisterFileUploader('wp-cert-upload-logo', (base64) => {\n \/\/ Replace header \/ top areas with brand logo or just add as a floating seal replacement\n const sealImg = document.getElementById('wp-canvas-img-seal');\n sealImg.src = base64;\n wpCertCaptureHistory();\n });\n\n wpCertRegisterFileUploader('wp-cert-upload-sig', (base64) => {\n const sigContainer = document.getElementById('wp-canvas-container-sig');\n sigContainer.innerHTML = `<img decoding=\"async\" src=\"${base64}\" class=\"wp-cert-media-sig\" alt=\"Signature\">`;\n wpCertCaptureHistory();\n });\n\n wpCertRegisterFileUploader('wp-cert-upload-seal', (base64) => {\n const sealImg = document.getElementById('wp-canvas-img-seal');\n sealImg.src = base64;\n wpCertCaptureHistory();\n });\n\n \/\/ Verification QR changes\n wpCertNodes.qrFieldInput.addEventListener('input', (e) => {\n wpCertState.qrUrl = e.target.value;\n wpCertUpdateQR();\n });\n }\n\n function wpCertRegisterFileUploader(id, callback) {\n document.getElementById(id).addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = function(evt) {\n callback(evt.target.result);\n };\n reader.readAsDataURL(file);\n }\n });\n }\n\n \/\/ Generate Verification Code QR code block dynamically\n function wpCertUpdateQR() {\n wpCertNodes.qrTarget.innerHTML = '';\n if (wpCertState.qrUrl) {\n wpCertQrCodeInstance = new QRCode(wpCertNodes.qrTarget, {\n text: wpCertState.qrUrl,\n width: 50,\n height: 50,\n colorDark : \"#000000\",\n colorLight : \"#ffffff\",\n correctLevel : QRCode.CorrectLevel.H\n });\n }\n }\n\n \/\/ Theme style updates inputs\n function wpCertSetupThemeInputs() {\n wpCertNodes.themeColorInput.addEventListener('input', (e) => {\n wpCertState.themeColor = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n wpCertNodes.accentColorInput.addEventListener('input', (e) => {\n wpCertState.accentColor = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n wpCertNodes.fontFamilySelect.addEventListener('change', (e) => {\n wpCertState.fontFamily = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n wpCertNodes.cornerStyleSelect.addEventListener('change', (e) => {\n wpCertState.cornerStyle = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n }\n\n function wpCertApplyColorsAndStyles() {\n \/\/ Change colors of main decorative borders\n document.getElementById('wp-canvas-element-border-primary').style.borderColor = wpCertState.themeColor;\n document.getElementById('wp-canvas-element-border-secondary').style.borderColor = wpCertState.accentColor;\n \n \/\/ Text changes\n document.getElementById('wp-canvas-text-title').style.color = wpCertState.themeColor;\n document.getElementById('wp-canvas-text-recipient').style.color = wpCertState.themeColor;\n document.getElementById('wp-canvas-text-course').style.color = wpCertState.themeColor;\n\n \/\/ Apply corners\n const corners = document.querySelectorAll('.wp-canvas-corner');\n corners.forEach(corner => {\n corner.style.borderColor = wpCertState.accentColor;\n corner.style.display = wpCertState.cornerStyle === 'none' ? 'none' : 'block';\n if (wpCertState.cornerStyle === 'minimal') {\n corner.style.width = '15px';\n corner.style.height = '15px';\n } else {\n corner.style.width = '30px';\n corner.style.height = '30px';\n }\n });\n\n \/\/ Apply global canvas fonts choice\n wpCertNodes.canvas.style.fontFamily = wpCertState.fontFamily;\n }\n\n \/\/ Drag-and-Drop text\/images placement positioning on A4 landscape canvas\n function wpCertSetupDraggables() {\n const dragItems = document.querySelectorAll('.wp-cert-drag-item');\n let activeDragElement = null;\n let startX, startY, origLeft, origTop;\n\n dragItems.forEach(item => {\n item.addEventListener('mousedown', (e) => {\n activeDragElement = item;\n \n \/\/ Select element highlight styling\n dragItems.forEach(el => el.classList.remove('selected'));\n item.classList.add('selected');\n\n \/\/ Get coordinates relative to preview container scaling limits\n startX = e.clientX;\n startY = e.clientY;\n\n origLeft = item.offsetLeft;\n origTop = item.offsetTop;\n\n document.addEventListener('mousemove', dragMove);\n document.addEventListener('mouseup', dragStop);\n });\n });\n\n function dragMove(e) {\n if (!activeDragElement) return;\n\n const dx = (e.clientX - startX) \/ wpCertState.zoom;\n const dy = (e.clientY - startY) \/ wpCertState.zoom;\n\n activeDragElement.style.left = (origLeft + dx) + 'px';\n activeDragElement.style.top = (origTop + dy) + 'px';\n }\n\n function dragStop() {\n if (activeDragElement) {\n activeDragElement = null;\n document.removeEventListener('mousemove', dragMove);\n document.removeEventListener('mouseup', dragStop);\n wpCertCaptureHistory();\n }\n }\n }\n\n \/\/ Zoom scale controller\n function wpCertSetupZoomControls() {\n wpCertNodes.btnZoomIn.addEventListener('click', () => {\n wpCertState.zoom = Math.min(1.5, wpCertState.zoom + 0.1);\n wpCertApplyZoom();\n });\n wpCertNodes.btnZoomOut.addEventListener('click', () => {\n wpCertState.zoom = Math.max(0.4, wpCertState.zoom - 0.1);\n wpCertApplyZoom();\n });\n }\n\n function wpCertApplyZoom() {\n wpCertNodes.zoomIndicator.innerText = Math.round(wpCertState.zoom * 100) + '%';\n wpCertNodes.canvas.style.transform = `scale(${wpCertState.zoom})`;\n }\n\n \/\/ Toggle orientation Layout (landscape vs portrait dimensions)\n function wpCertToggleOrientation() {\n if (wpCertState.orientation === 'landscape') {\n wpCertState.orientation = 'portrait';\n wpCertNodes.canvas.classList.add('portrait');\n document.getElementById('wp-cert-layout-indicator').innerText = 'Portrait';\n } else {\n wpCertState.orientation = 'landscape';\n wpCertNodes.canvas.classList.remove('portrait');\n document.getElementById('wp-cert-layout-indicator').innerText = 'Landscape';\n }\n wpCertCaptureHistory();\n }\n\n \/\/ PDF generation & Export high resolution engine\n function wpCertExportPDF() {\n const target = wpCertNodes.canvas;\n const opt = {\n margin: 0,\n filename: 'Certificate.pdf',\n image: { type: 'jpeg', quality: 0.98 },\n html2canvas: { scale: 2, useCORS: true, logging: false },\n jsPDF: { unit: 'mm', format: 'a4', orientation: wpCertState.orientation }\n };\n\n \/\/ Standardise scale matrix transformation safely for capture export process\n const prevTransform = target.style.transform;\n target.style.transform = 'none';\n\n html2pdf().from(target).set(opt).save().then(() => {\n target.style.transform = prevTransform;\n });\n }\n\n \/\/ Native browser print layouts\n function wpCertPrintCertificate() {\n const content = wpCertNodes.canvas.outerHTML;\n const printWindow = window.open('', '_blank');\n printWindow.document.write(`\n <html>\n <head>\n <title>Print Certificate<\/title>\n <style>\n body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }\n .wp-cert-canvas-frame { width: 842px; height: 595px; border: none; box-shadow: none; position: relative; font-family: ${wpCertState.fontFamily}; }\n .portrait { width: 595px !important; height: 842px !important; }\n .wp-cert-art-border { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; border: 4px solid ${wpCertState.themeColor}; }\n .wp-cert-art-border-double { position: absolute; top: 26px; left: 26px; right: 26px; bottom: 26px; border: 1px solid ${wpCertState.accentColor}; }\n .wp-cert-corner-decor { position: absolute; width: 30px; height: 30px; border-color: ${wpCertState.accentColor}; border-style: solid; }\n .wp-cert-corner-top-left { top: 32px; left: 32px; border-width: 3px 0 0 3px; }\n .wp-cert-corner-top-right { top: 32px; right: 32px; border-width: 3px 3px 0 0; }\n .wp-cert-corner-bottom-left { bottom: 32px; left: 32px; border-width: 0 0 3px 3px; }\n .wp-cert-corner-bottom-right { bottom: 32px; right: 32px; border-width: 0 3px 3px 0; }\n .wp-cert-drag-item { position: absolute; text-align: center; }\n .wp-cert-pos-title { top: 12%; left: 10%; width: 80%; }\n .wp-cert-pos-subtitle { top: 22%; left: 15%; width: 70%; }\n .wp-cert-pos-recipient { top: 34%; left: 15%; width: 70%; }\n .wp-cert-pos-description { top: 48%; left: 15%; width: 70%; }\n .wp-cert-pos-course { top: 60%; left: 15%; width: 70%; }\n .wp-cert-pos-meta-left { bottom: 12%; left: 10%; width: 25%; }\n .wp-cert-pos-meta-center { bottom: 8%; left: 37.5%; width: 25%; }\n .wp-cert-pos-meta-right { bottom: 12%; right: 10%; width: 25%; }\n img { max-width: 100%; height: auto; }\n #wp-canvas-qr-target img { display: inline-block !important; }\n @page { size: A4 ${wpCertState.orientation}; margin: 0; }\n <\/style>\n <\/head>\n <body onload=\"window.print(); window.close();\">\n ${content}\n <\/body>\n <\/html>\n `);\n printWindow.document.close();\n }\n\n \/\/ Helper: generate IDs easily\n function wpCertGenerateRandomId() {\n const randomNum = Math.floor(1000 + Math.random() * 9000);\n const year = new Date().getFullYear();\n document.getElementById('wp-cert-field-id').value = `CERT-${year}-${randomNum}`;\n wpCertSyncInputToCanvas();\n wpCertCaptureHistory();\n }\n\n \/\/ Undo \/ Redo engine tracking snapshot\n function wpCertCaptureHistory() {\n const currentData = {\n title: document.querySelector('[data-field=\"title\"]').value,\n subtitle: document.querySelector('[data-field=\"subtitle\"]').value,\n recipient: document.querySelector('[data-field=\"recipient\"]').value,\n desc: document.querySelector('[data-field=\"description\"]').value,\n course: document.querySelector('[data-field=\"course\"]').value,\n certId: document.querySelector('[data-field=\"cert-id\"]').value,\n date: document.querySelector('[data-field=\"issue-date\"]').value,\n themeColor: wpCertState.themeColor,\n accentColor: wpCertState.accentColor,\n fontFamily: wpCertState.fontFamily,\n orientation: wpCertState.orientation,\n cornerStyle: wpCertState.cornerStyle,\n qrUrl: wpCertState.qrUrl\n };\n\n \/\/ Overwrite standard forward line if user edited in between\n if (wpCertState.historyIndex < wpCertState.history.length - 1) {\n wpCertState.history = wpCertState.history.slice(0, wpCertState.historyIndex + 1);\n }\n\n wpCertState.history.push(currentData);\n wpCertState.historyIndex++;\n }\n\n function wpCertUndoAction() {\n if (wpCertState.historyIndex > 0) {\n wpCertState.historyIndex--;\n wpCertRestoreFromHistory(wpCertState.history[wpCertState.historyIndex]);\n }\n }\n\n function wpCertRedoAction() {\n if (wpCertState.historyIndex < wpCertState.history.length - 1) {\n wpCertState.historyIndex++;\n wpCertRestoreFromHistory(wpCertState.history[wpCertState.historyIndex]);\n }\n }\n\n function wpCertRestoreFromHistory(stateObj) {\n if (!stateObj) return;\n\n document.querySelector('[data-field=\"title\"]').value = stateObj.title;\n document.querySelector('[data-field=\"subtitle\"]').value = stateObj.subtitle;\n document.querySelector('[data-field=\"recipient\"]').value = stateObj.recipient;\n document.querySelector('[data-field=\"description\"]').value = stateObj.desc;\n document.querySelector('[data-field=\"course\"]').value = stateObj.course;\n document.querySelector('[data-field=\"cert-id\"]').value = stateObj.certId;\n document.querySelector('[data-field=\"issue-date\"]').value = stateObj.date;\n\n wpCertState.themeColor = stateObj.themeColor;\n wpCertState.accentColor = stateObj.accentColor;\n wpCertState.fontFamily = stateObj.fontFamily;\n wpCertState.orientation = stateObj.orientation;\n wpCertState.cornerStyle = stateObj.cornerStyle;\n wpCertState.qrUrl = stateObj.qrUrl;\n\n wpCertNodes.themeColorInput.value = stateObj.themeColor;\n wpCertNodes.accentColorInput.value = stateObj.accentColor;\n wpCertNodes.fontFamilySelect.value = stateObj.fontFamily;\n wpCertNodes.cornerStyleSelect.value = stateObj.cornerStyle;\n wpCertNodes.qrFieldInput.value = stateObj.qrUrl;\n\n if (wpCertState.orientation === 'portrait') {\n wpCertNodes.canvas.classList.add('portrait');\n } else {\n wpCertNodes.canvas.classList.remove('portrait');\n }\n\n wpCertSyncInputToCanvas();\n wpCertApplyColorsAndStyles();\n wpCertUpdateQR();\n }\n\n function wpCertResetWorkspace() {\n if (confirm('Are you sure you want to reset all modifications?')) {\n document.querySelector('[data-field=\"title\"]').value = 'CERTIFICATE OF APPRECIATION';\n document.querySelector('[data-field=\"subtitle\"]').value = 'This is proudly presented to';\n document.querySelector('[data-field=\"recipient\"]').value = 'Jane Doe';\n document.querySelector('[data-field=\"description\"]').value = 'for successfully completing all requirements of the professional program';\n document.querySelector('[data-field=\"course\"]').value = 'Advanced Full-Stack Engineering 2026';\n \n wpCertState.themeColor = '#1e293b';\n wpCertState.accentColor = '#c5a880';\n wpCertState.fontFamily = \"'Georgia', serif\";\n wpCertState.cornerStyle = 'classic';\n wpCertState.orientation = 'landscape';\n wpCertNodes.canvas.classList.remove('portrait');\n\n wpCertSyncInputToCanvas();\n wpCertApplyColorsAndStyles();\n wpCertCaptureHistory();\n }\n }\n\n \/\/ Launch Application inside scope safely\n wpCertInit();\n\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Professional Certificate Generator Premium Certificate Engine Design, customize and export high-resolution A4 awards instantly Reset Export High-Res PDF 1. Choose Template Layout Landscape 2. Customize Fields Content Styling Images & Verification Certificate Header \/ Title Sub-text\/Purpose Recipient Full Name Presentation Description Course \/ Achievement Name Issue Date Certificate ID \ud83c\udfb2 Authorized Signatory Signatory Title Primary […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-498","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":1,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/498\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/498\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":498,"date":"2026-07-16T16:06:20","date_gmt":"2026-07-16T16:06:20","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=498"},"modified":"2026-07-25T16:28:57","modified_gmt":"2026-07-25T16:28:57","slug":"certificate-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/certificate-generator\/","title":{"rendered":"Certificate Generator"},"content":{"rendered":"\n\n\n\n \n \n Professional Certificate Generator<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n <style>\n :root {\n --wp-cert-bg: #f8fafc;\n --wp-cert-card-bg: rgba(255, 255, 255, 0.95);\n --wp-cert-border-color: #e2e8f0;\n --wp-cert-text-main: #0f172a;\n --wp-cert-text-sub: #475569;\n --wp-cert-accent: #2563eb;\n --wp-cert-accent-hover: #1d4ed8;\n --wp-cert-success: #10b981;\n --wp-cert-danger: #ef4444;\n --wp-cert-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --wp-cert-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --wp-cert-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --wp-cert-font: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n }\n\n \/* Namespace wrapper *\/\n .wp-cert-app-container {\n box-sizing: border-box;\n font-family: var(--wp-cert-font);\n background-color: var(--wp-cert-bg);\n color: var(--wp-cert-text-main);\n min-height: 100vh;\n padding: 2rem 1rem;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n line-height: 1.5;\n }\n\n .wp-cert-app-container * {\n box-sizing: border-box;\n }\n\n \/* Upper Controls \/ Navbar *\/\n .wp-cert-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--wp-cert-card-bg);\n padding: 1.25rem 2rem;\n border-radius: 16px;\n box-shadow: var(--wp-cert-shadow);\n border: 1px solid var(--wp-cert-border-color);\n }\n\n .wp-cert-title-area h1 {\n font-size: 1.5rem;\n font-weight: 800;\n margin: 0;\n background: linear-gradient(135deg, #1e293b, #2563eb);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .wp-cert-title-area p {\n font-size: 0.875rem;\n color: var(--wp-cert-text-sub);\n margin: 0.25rem 0 0 0;\n }\n\n .wp-cert-global-actions {\n display: flex;\n gap: 0.75rem;\n }\n\n \/* Buttons styling *\/\n .wp-cert-btn {\n font-size: 0.875rem;\n font-weight: 600;\n padding: 0.625rem 1.25rem;\n border-radius: 10px;\n border: 1px solid var(--wp-cert-border-color);\n background-color: #fff;\n color: var(--wp-cert-text-main);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: all 0.2s ease-in-out;\n }\n\n .wp-cert-btn:hover {\n transform: translateY(-1px);\n box-shadow: var(--wp-cert-shadow-sm);\n border-color: #cbd5e1;\n }\n\n .wp-cert-btn-primary {\n background-color: var(--wp-cert-accent);\n color: #ffffff;\n border: none;\n }\n\n .wp-cert-btn-primary:hover {\n background-color: var(--wp-cert-accent-hover);\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);\n }\n\n .wp-cert-btn-danger {\n background-color: #fef2f2;\n color: var(--wp-cert-danger);\n border-color: #fca5a5;\n }\n\n .wp-cert-btn-danger:hover {\n background-color: #fee2e2;\n }\n\n \/* Workspace Grid *\/\n .wp-cert-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n align-items: start;\n }\n\n @media (min-width: 1024px) {\n .wp-cert-grid {\n grid-template-columns: 450px 1fr;\n }\n }\n\n \/* Sidebar Editor Panels *\/\n .wp-cert-sidebar {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n .wp-cert-card {\n background: var(--wp-cert-card-bg);\n border: 1px solid var(--wp-cert-border-color);\n border-radius: 16px;\n box-shadow: var(--wp-cert-shadow);\n overflow: hidden;\n }\n\n .wp-cert-card-header {\n padding: 1.25rem 1.5rem;\n border-bottom: 1px solid var(--wp-cert-border-color);\n font-weight: 700;\n font-size: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8fafc;\n }\n\n .wp-cert-card-body {\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n \/* Form Controls *\/\n .wp-cert-field-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .wp-cert-field-group label {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--wp-cert-text-sub);\n }\n\n .wp-cert-input, .wp-cert-select {\n width: 100%;\n padding: 0.625rem 0.875rem;\n font-size: 0.875rem;\n border-radius: 8px;\n border: 1px solid var(--wp-cert-border-color);\n outline: none;\n transition: border-color 0.15s ease-in-out;\n }\n\n .wp-cert-input:focus, .wp-cert-select:focus {\n border-color: var(--wp-cert-accent);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n }\n\n .wp-cert-row-2col {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n }\n\n \/* File input custom styles *\/\n .wp-cert-file-upload {\n position: relative;\n display: inline-block;\n width: 100%;\n }\n\n .wp-cert-file-upload input[type=\"file\"] {\n position: absolute;\n left: 0;\n top: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n }\n\n .wp-cert-file-label {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.625rem 0.875rem;\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--wp-cert-accent);\n background: #eff6ff;\n border: 1px dashed #bfdbfe;\n border-radius: 8px;\n text-align: center;\n }\n\n \/* Tabs inside Customize Panel *\/\n .wp-cert-tabs {\n display: flex;\n border-bottom: 1px solid var(--wp-cert-border-color);\n background: #f1f5f9;\n }\n\n .wp-cert-tab {\n flex: 1;\n padding: 0.75rem;\n text-align: center;\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--wp-cert-text-sub);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n }\n\n .wp-cert-tab.active {\n color: var(--wp-cert-accent);\n border-bottom-color: var(--wp-cert-accent);\n background: #fff;\n }\n\n .wp-cert-tab-content {\n display: none;\n padding: 1.25rem;\n }\n\n .wp-cert-tab-content.active {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n \/* Certificate Preview Workspace Area *\/\n .wp-cert-preview-column {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n position: sticky;\n top: 2rem;\n }\n\n .wp-cert-preview-actions-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--wp-cert-card-bg);\n padding: 0.875rem 1.5rem;\n border-radius: 12px;\n border: 1px solid var(--wp-cert-border-color);\n box-shadow: var(--wp-cert-shadow-sm);\n }\n\n .wp-cert-preview-controls {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n }\n\n \/* Search Filter bar *\/\n .wp-cert-search-bar {\n position: relative;\n margin-bottom: 0.5rem;\n }\n\n \/* Templates List *\/\n .wp-cert-template-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n gap: 0.75rem;\n max-height: 240px;\n overflow-y: auto;\n padding: 0.25rem;\n }\n\n .wp-cert-template-item {\n border: 1px solid var(--wp-cert-border-color);\n border-radius: 8px;\n padding: 0.5rem;\n cursor: pointer;\n text-align: center;\n transition: all 0.2s ease;\n background: #ffffff;\n }\n\n .wp-cert-template-item:hover, .wp-cert-template-item.active {\n border-color: var(--wp-cert-accent);\n background: #f0fdf4;\n box-shadow: var(--wp-cert-shadow-sm);\n }\n\n .wp-cert-template-thumb {\n aspect-ratio: 1.414;\n background: #e2e8f0;\n border-radius: 4px;\n margin-bottom: 0.35rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.625rem;\n font-weight: 700;\n color: #64748b;\n border: 1px solid #cbd5e1;\n }\n\n .wp-cert-template-title {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--wp-cert-text-main);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n \/* Certificate Canvas Area container styling *\/\n .wp-cert-canvas-container {\n width: 100%;\n overflow: auto;\n background: #64748b;\n border-radius: 16px;\n padding: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #475569;\n box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);\n min-height: 480px;\n }\n\n \/* The Live A4 Landscape Canvas Frame *\/\n .wp-cert-canvas-frame {\n width: 842px; \/* Standard A4 landscape aspect ratio scaling *\/\n height: 595px;\n background-color: #ffffff;\n position: relative;\n flex-shrink: 0;\n box-shadow: var(--wp-cert-shadow-lg);\n border-radius: 4px;\n transform-origin: center center;\n transition: transform 0.2s ease-out;\n overflow: hidden;\n user-select: none;\n }\n\n \/* Portrait template option dynamic class *\/\n .wp-cert-canvas-frame.portrait {\n width: 595px;\n height: 842px;\n }\n\n \/* Certificate Template Decorative Background Elements inside iframe\/preview *\/\n .wp-cert-art-border {\n position: absolute;\n top: 20px;\n left: 20px;\n right: 20px;\n bottom: 20px;\n border: 4px solid #1e293b;\n pointer-events: none;\n box-sizing: border-box;\n }\n\n .wp-cert-art-border-double {\n position: absolute;\n top: 26px;\n left: 26px;\n right: 26px;\n bottom: 26px;\n border: 1px solid #c5a880;\n pointer-events: none;\n box-sizing: border-box;\n }\n\n .wp-cert-corner-decor {\n position: absolute;\n width: 30px;\n height: 30px;\n border-color: #c5a880;\n border-style: solid;\n pointer-events: none;\n }\n .wp-cert-corner-top-left { top: 32px; left: 32px; border-width: 3px 0 0 3px; }\n .wp-cert-corner-top-right { top: 32px; right: 32px; border-width: 3px 3px 0 0; }\n .wp-cert-corner-bottom-left { bottom: 32px; left: 32px; border-width: 0 0 3px 3px; }\n .wp-cert-corner-bottom-right { bottom: 32px; right: 32px; border-width: 0 3px 3px 0; }\n\n \/* Draggable elements on Canvas *\/\n .wp-cert-drag-item {\n position: absolute;\n cursor: move;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: 1px dashed transparent;\n padding: 4px;\n transition: outline-color 0.15s ease-in-out;\n }\n\n .wp-cert-drag-item:hover, .wp-cert-drag-item.selected {\n outline-color: var(--wp-cert-accent);\n }\n\n .wp-cert-drag-item-inner {\n text-align: center;\n width: 100%;\n height: 100%;\n white-space: pre-wrap;\n pointer-events: none; \/* Let the parent container handle drag events *\/\n }\n\n \/* Specific placement on canvas initialization default templates *\/\n .wp-cert-pos-title { top: 12%; left: 10%; width: 80%; }\n .wp-cert-pos-subtitle { top: 22%; left: 15%; width: 70%; }\n .wp-cert-pos-recipient { top: 34%; left: 15%; width: 70%; }\n .wp-cert-pos-description { top: 48%; left: 15%; width: 70%; }\n .wp-cert-pos-course { top: 60%; left: 15%; width: 70%; }\n \n \/* Dual footer structures *\/\n .wp-cert-pos-meta-left { bottom: 12%; left: 10%; width: 25%; }\n .wp-cert-pos-meta-center { bottom: 8%; left: 37.5%; width: 25%; }\n .wp-cert-pos-meta-right { bottom: 12%; right: 10%; width: 25%; }\n\n \/* Media Elements *\/\n .wp-cert-media-logo {\n max-height: 70px;\n max-width: 150px;\n object-fit: contain;\n }\n\n .wp-cert-media-sig {\n max-height: 50px;\n max-width: 140px;\n object-fit: contain;\n }\n\n .wp-cert-media-seal {\n max-height: 80px;\n max-width: 80px;\n object-fit: contain;\n }\n\n \/* SVG icon style helper *\/\n .wp-cert-icon {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n\n \/* Undo\/Redo Controls overlay layout *\/\n .wp-cert-history-bar {\n display: flex;\n gap: 0.5rem;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"wp-cert-app-container\">\n\n <header class=\"wp-cert-header\">\n <div class=\"wp-cert-title-area\">\n <h1>Premium Certificate Engine<\/h1>\n <p>Design, customize and export high-resolution A4 awards instantly<\/p>\n <\/div>\n <div class=\"wp-cert-global-actions\">\n <div class=\"wp-cert-history-bar\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-undo\" title=\"Undo (Ctrl+Z)\">\n <svg class=\"wp-cert-icon\" viewBox=\"0 0 24 24\"><path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.25 8 12.5 8z\"\/><\/svg>\n <\/button>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-redo\" title=\"Redo (Ctrl+Y)\">\n <svg class=\"wp-cert-icon\" viewBox=\"0 0 24 24\"><path d=\"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.75 0-8.58 3.03-9.97 7.22l2.37.78c1.05-3.19 4.06-5.5 7.6-5.5 1.96 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z\"\/><\/svg>\n <\/button>\n <\/div>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-reset\">Reset<\/button>\n <button class=\"wp-cert-btn wp-cert-btn-primary\" id=\"wp-cert-btn-export-pdf\">\n <svg class=\"wp-cert-icon\" viewBox=\"0 0 24 24\"><path fill=\"#fff\" d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\"\/><\/svg>\n Export High-Res PDF\n <\/button>\n <\/div>\n <\/header>\n\n <main class=\"wp-cert-grid\">\n\n <div class=\"wp-cert-sidebar\">\n\n <div class=\"wp-cert-card\">\n <div class=\"wp-cert-card-header\">\n <span>1. Choose Template Layout<\/span>\n <span style=\"font-size:0.75rem; color:var(--wp-cert-accent); font-weight:700;\" id=\"wp-cert-layout-indicator\">Landscape<\/span>\n <\/div>\n <div class=\"wp-cert-card-body\">\n <div class=\"wp-cert-search-bar\">\n <input type=\"text\" class=\"wp-cert-input\" id=\"wp-cert-search-templates\" placeholder=\"Search templates (e.g., Course, Award)...\">\n <\/div>\n <div class=\"wp-cert-template-grid\" id=\"wp-cert-template-list\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-card\">\n <div class=\"wp-cert-card-header\">\n <span>2. Customize Fields<\/span>\n <\/div>\n \n <div class=\"wp-cert-tabs\">\n <div class=\"wp-cert-tab active\" data-tab-target=\"wp-cert-tab-content\">Content<\/div>\n <div class=\"wp-cert-tab\" data-tab-target=\"wp-cert-tab-style\">Styling<\/div>\n <div class=\"wp-cert-tab\" data-tab-target=\"wp-cert-tab-media\">Images & Verification<\/div>\n <\/div>\n\n <div class=\"wp-cert-tab-content active\" id=\"wp-cert-tab-content\">\n <div class=\"wp-cert-field-group\">\n <label>Certificate Header \/ Title<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"title\" value=\"CERTIFICATE OF APPRECIATION\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Sub-text\/Purpose<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"subtitle\" value=\"This is proudly presented to\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Recipient Full Name<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"recipient\" value=\"Jane Doe\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Presentation Description<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"description\" value=\"for successfully completing all requirements of the professional program\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Course \/ Achievement Name<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"course\" value=\"Advanced Full-Stack Engineering 2026\">\n <\/div>\n \n <div class=\"wp-cert-row-2col\">\n <div class=\"wp-cert-field-group\">\n <label>Issue Date<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"issue-date\" value=\"July 16, 2026\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Certificate ID<\/label>\n <div style=\"display:flex; gap:0.25rem;\">\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" id=\"wp-cert-field-id\" data-field=\"cert-id\" value=\"CERT-2026-9912\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-random-id\" style=\"padding:0.5rem;\" title=\"Random ID\">\ud83c\udfb2<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-row-2col\">\n <div class=\"wp-cert-field-group\">\n <label>Authorized Signatory<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"signatory\" value=\"Dr. Robert Carter\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Signatory Title<\/label>\n <input type=\"text\" class=\"wp-cert-input wp-cert-live-field\" data-field=\"signatory-title\" value=\"Managing Director\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-tab-content\" id=\"wp-cert-tab-style\">\n <div class=\"wp-cert-field-group\">\n <label>Primary Theme Color<\/label>\n <input type=\"color\" class=\"wp-cert-input\" id=\"wp-cert-color-theme\" value=\"#1e293b\" style=\"height:40px; padding:2px; cursor:pointer;\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Accent Highlights Color<\/label>\n <input type=\"color\" class=\"wp-cert-input\" id=\"wp-cert-color-accent\" value=\"#c5a880\" style=\"height:40px; padding:2px; cursor:pointer;\">\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Typography Font Family<\/label>\n <select class=\"wp-cert-select\" id=\"wp-cert-font-family\">\n <option value=\"'Georgia', serif\">Georgia (Elegant Serif)<\/option>\n <option value=\"'Times New Roman', serif\">Times New Roman<\/option>\n <option value=\"system-ui, sans-serif\">System Sans-Serif<\/option>\n <option value=\"'Courier New', monospace\">Courier (Modern tech)<\/option>\n <\/select>\n <\/div>\n <div class=\"wp-cert-field-group\">\n <label>Corner Accent Style<\/label>\n <select class=\"wp-cert-select\" id=\"wp-cert-corner-style\">\n <option value=\"classic\">Ornate Corners<\/option>\n <option value=\"minimal\">Minimal Corners<\/option>\n <option value=\"none\">No Corner Ornaments<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-tab-content\" id=\"wp-cert-tab-media\">\n <div class=\"wp-cert-field-group\">\n <label>Brand Logo Image<\/label>\n <div class=\"wp-cert-file-upload\">\n <span class=\"wp-cert-file-label\">Choose Logo PNG \/ JPG<\/span>\n <input type=\"file\" id=\"wp-cert-upload-logo\" accept=\"image\/*\">\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-field-group\">\n <label>Signature Image<\/label>\n <div class=\"wp-cert-file-upload\">\n <span class=\"wp-cert-file-label\">Choose Signature Graphic<\/span>\n <input type=\"file\" id=\"wp-cert-upload-sig\" accept=\"image\/*\">\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-field-group\">\n <label>Seal \/ Badge \/ Stamp<\/label>\n <div class=\"wp-cert-file-upload\">\n <span class=\"wp-cert-file-label\">Upload Official Seal<\/span>\n <input type=\"file\" id=\"wp-cert-upload-seal\" accept=\"image\/*\">\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-field-group\">\n <label>Verification Link QR Code URL<\/label>\n <input type=\"url\" class=\"wp-cert-input\" id=\"wp-cert-field-qr\" value=\"https:\/\/verify.org\/id\/9912\">\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <div class=\"wp-cert-preview-column\">\n \n <div class=\"wp-cert-preview-actions-bar\">\n <div class=\"wp-cert-preview-controls\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-zoom-out\" title=\"Zoom Out\">–<\/button>\n <span id=\"wp-cert-zoom-indicator\" style=\"font-size:0.8125rem; font-weight:700;\">85%<\/span>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-zoom-in\" title=\"Zoom In\">+<\/button>\n <\/div>\n <div style=\"display:flex; gap:0.5rem;\">\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-orientation\" title=\"Toggle Orientation\">\ud83d\udd04 Flip Layout<\/button>\n <button class=\"wp-cert-btn\" id=\"wp-cert-btn-print\">Print<\/button>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-canvas-container\">\n <div class=\"wp-cert-canvas-frame\" id=\"wp-cert-canvas\">\n \n <div class=\"wp-cert-art-border\" id=\"wp-canvas-element-border-primary\"><\/div>\n <div class=\"wp-cert-art-border-double\" id=\"wp-canvas-element-border-secondary\"><\/div>\n\n <div class=\"wp-cert-corner-decor wp-cert-corner-top-left wp-canvas-corner\"><\/div>\n <div class=\"wp-cert-corner-decor wp-cert-corner-top-right wp-canvas-corner\"><\/div>\n <div class=\"wp-cert-corner-decor wp-cert-corner-bottom-left wp-canvas-corner\"><\/div>\n <div class=\"wp-cert-corner-decor wp-cert-corner-bottom-right wp-canvas-corner\"><\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-title\" data-element-id=\"title\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-title\" style=\"font-size:24px; font-weight:800; letter-spacing:1px; color:#1e293b;\">\n CERTIFICATE OF APPRECIATION\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-subtitle\" data-element-id=\"subtitle\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-subtitle\" style=\"font-size:14px; font-style:italic; color:#475569;\">\n This is proudly presented to\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-recipient\" data-element-id=\"recipient\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-recipient\" style=\"font-size:32px; font-weight:700; border-bottom:1px solid #cbd5e1; padding-bottom:8px; display:inline-block; width:100%; color:#1e293b;\">\n Jane Doe\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-description\" data-element-id=\"description\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-description\" style=\"font-size:12px; color:#475569;\">\n for successfully completing all requirements of the professional program\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-course\" data-element-id=\"course\">\n <div class=\"wp-cert-drag-item-inner\" id=\"wp-canvas-text-course\" style=\"font-size:18px; font-weight:700; color:#1d4ed8;\">\n Advanced Full-Stack Engineering 2026\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-meta-left\" data-element-id=\"signatory-area\">\n <div class=\"wp-cert-drag-item-inner\" style=\"display:flex; flex-direction:column; align-items:center;\">\n <div id=\"wp-canvas-container-sig\" style=\"height:50px; display:flex; align-items:flex-end; margin-bottom:4px;\">\n <div style=\"font-size:18px; font-family:'Georgia'; color:#64748b; font-style:italic;\" id=\"wp-canvas-raw-sig-text\">Robert Carter<\/div>\n <\/div>\n <div style=\"width:130px; border-top:1px solid #94a3b8; margin:2px 0;\"><\/div>\n <div id=\"wp-canvas-text-signatory\" style=\"font-size:11px; font-weight:700; color:#1e293b;\">Dr. Robert Carter<\/div>\n <div id=\"wp-canvas-text-signatory-title\" style=\"font-size:9px; color:#64748b;\">Managing Director<\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-meta-center\" data-element-id=\"seal-area\">\n <div class=\"wp-cert-drag-item-inner\" style=\"display:flex; justify-content:center; align-items:center; height:80px;\">\n <img decoding=\"async\" src=\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='%23c5a880' stroke-width='3'\/><circle cx='50' cy='50' r='38' fill='none' stroke='%23c5a880' stroke-dasharray='5,3'\/><path d='M35,35 L65,65 M65,35 L35,65' stroke='%23c5a880' stroke-width='2'\/><\/svg>” class=”wp-cert-media-seal” id=”wp-canvas-img-seal” alt=”Seal”>\n <\/div>\n <\/div>\n\n <div class=\"wp-cert-drag-item wp-cert-pos-meta-right\" data-element-id=\"meta-right\">\n <div class=\"wp-cert-drag-item-inner\" style=\"display:flex; flex-direction:column; align-items:center; gap:4px;\">\n <div id=\"wp-canvas-qr-target\" style=\"width:50px; height:50px; background:#fff; padding:2px; border:1px solid #e2e8f0;\"><\/div>\n <div style=\"font-size:9px; color:#475569;\">\n ID: <span id=\"wp-canvas-text-cert-id\" style=\"font-weight:700;\">CERT-2026-9912<\/span>\n <\/div>\n <div style=\"font-size:9px; color:#475569;\">\n Date: <span id=\"wp-canvas-text-issue-date\" style=\"font-weight:700;\">July 16, 2026<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/main>\n\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ Application state\n const wpCertState = {\n zoom: 0.85,\n orientation: 'landscape', \/\/ 'landscape' or 'portrait'\n selectedElement: null,\n themeColor: '#1e293b',\n accentColor: '#c5a880',\n activeTab: 'wp-cert-tab-content',\n fontFamily: \"'Georgia', serif\",\n cornerStyle: 'classic',\n qrUrl: 'https:\/\/verify.org\/id\/9912',\n \n \/\/ Undo \/ Redo history\n history: [],\n historyIndex: -1,\n\n \/\/ Available Certificate templates meta definition array\n templates: [\n { id: 'apprec', title: 'Appreciation', type: 'Academic Certificate', textTitle: 'CERTIFICATE OF APPRECIATION', subtitle: 'This award is proudly presented to', desc: 'for outstanding contributions and dedication shown during operations.', color: '#1e293b', accent: '#c5a880' },\n { id: 'course', title: 'Course Completion', type: 'Course Completion', textTitle: 'CERTIFICATE OF COMPLETION', subtitle: 'This certifies that', desc: 'has successfully completed all assignments and curriculum targets for', color: '#0f172a', accent: '#10b981' },\n { id: 'achieve', title: 'Achievement', type: 'Achievement Certificate', textTitle: 'CERTIFICATE OF ACHIEVEMENT', subtitle: 'Highly Recognition presented to', desc: 'for demonstrating excellence and exceeding organizational benchmarks in', color: '#1e3a8a', accent: '#f59e0b' },\n { id: 'intern', title: 'Internship', type: 'Internship Certificate', textTitle: 'INTERNSHIP CERTIFICATE', subtitle: 'This is to certify that', desc: 'has finished their practical industry internship curriculum with honors as a', color: '#111827', accent: '#3b82f6' },\n { id: 'work', title: 'Workshop', type: 'Workshop Certificate', textTitle: 'WORKSHOP PARTICIPATION', subtitle: 'This verifies the active training of', desc: 'for actively attending the intensive masterclass training program', color: '#312e81', accent: '#8b5cf6' },\n { id: 'train', title: 'Training Program', type: 'Training Certificate', textTitle: 'CERTIFICATE OF TRAINING', subtitle: 'Proudly awarded to', desc: 'for completing advanced professional orientation development in', color: '#064e3b', accent: '#a3e635' },\n { id: 'award', title: 'Employee Award', type: 'Employee Award', textTitle: 'EMPLOYEE OF THE MONTH', subtitle: 'Outstanding Excellence award presented to', desc: 'in recognition of valuable contribution and high team motivation at', color: '#4c1d95', accent: '#ec4899' },\n { id: 'volun', title: 'Volunteer', type: 'Volunteer Certificate', textTitle: 'VOLUNTEER RECOGNITION', subtitle: 'In sincere gratitude to', desc: 'for selflessly dedicating time, spirit, and valuable expertise to support', color: '#7c2d12', accent: '#f97316' },\n { id: 'sports', title: 'Sports Award', type: 'Sports Certificate', textTitle: 'ATHLETIC AWARD OF HONOR', subtitle: 'This is awarded to', desc: 'for presenting excellent sportsmanship and winning first place in the tournament', color: '#1e1b4b', accent: '#e11d48' },\n { id: 'general', title: 'General Award', type: 'Participation Certificate', textTitle: 'CERTIFICATE OF PARTICIPATION', subtitle: 'Warmly presented to', desc: 'for joining and bringing amazing positive energy to our yearly meet-up', color: '#022c22', accent: '#f43f5e' }\n ]\n };\n\n \/\/ DOM Nodes lookup\n const wpCertNodes = {\n canvas: document.getElementById('wp-cert-canvas'),\n templateList: document.getElementById('wp-cert-template-list'),\n searchTemplates: document.getElementById('wp-cert-search-templates'),\n themeColorInput: document.getElementById('wp-cert-color-theme'),\n accentColorInput: document.getElementById('wp-cert-color-accent'),\n fontFamilySelect: document.getElementById('wp-cert-font-family'),\n cornerStyleSelect: document.getElementById('wp-cert-corner-style'),\n qrFieldInput: document.getElementById('wp-cert-field-qr'),\n zoomIndicator: document.getElementById('wp-cert-zoom-indicator'),\n orientationBtn: document.getElementById('wp-cert-btn-orientation'),\n btnExportPdf: document.getElementById('wp-cert-btn-export-pdf'),\n btnPrint: document.getElementById('wp-cert-btn-print'),\n btnRandomId: document.getElementById('wp-cert-btn-random-id'),\n btnUndo: document.getElementById('wp-cert-btn-undo'),\n btnRedo: document.getElementById('wp-cert-btn-redo'),\n btnReset: document.getElementById('wp-cert-btn-reset'),\n btnZoomIn: document.getElementById('wp-cert-btn-zoom-in'),\n btnZoomOut: document.getElementById('wp-cert-btn-zoom-out'),\n qrTarget: document.getElementById('wp-canvas-qr-target')\n };\n\n let wpCertQrCodeInstance = null;\n\n \/\/ Initialize Engine\n function wpCertInit() {\n wpCertSetupTabs();\n wpCertSetupTemplateFilter();\n wpCertRenderTemplates(wpCertState.templates);\n wpCertSetupLiveFields();\n wpCertSetupMediaUploads();\n wpCertSetupDraggables();\n wpCertSetupZoomControls();\n wpCertSetupThemeInputs();\n wpCertUpdateQR();\n\n \/\/ Button handlers\n wpCertNodes.orientationBtn.addEventListener('click', wpCertToggleOrientation);\n wpCertNodes.btnExportPdf.addEventListener('click', wpCertExportPDF);\n wpCertNodes.btnPrint.addEventListener('click', wpCertPrintCertificate);\n wpCertNodes.btnRandomId.addEventListener('click', wpCertGenerateRandomId);\n wpCertNodes.btnUndo.addEventListener('click', wpCertUndoAction);\n wpCertNodes.btnRedo.addEventListener('click', wpCertRedoAction);\n wpCertNodes.btnReset.addEventListener('click', wpCertResetWorkspace);\n\n \/\/ Capture initial state for undo\n wpCertCaptureHistory();\n wpCertApplyZoom();\n }\n\n \/\/ Tabs control switching\n function wpCertSetupTabs() {\n const tabs = document.querySelectorAll('.wp-cert-tab');\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.wp-cert-tab-content').forEach(c => c.classList.remove('active'));\n \n tab.classList.add('active');\n const target = tab.getAttribute('data-tab-target');\n document.getElementById(target).classList.add('active');\n });\n });\n }\n\n \/\/ Search and Render templates on sidebar list\n function wpCertSetupTemplateFilter() {\n wpCertNodes.searchTemplates.addEventListener('input', (e) => {\n const query = e.target.value.toLowerCase();\n const filtered = wpCertState.templates.filter(t => \n t.title.toLowerCase().includes(query) || \n t.type.toLowerCase().includes(query)\n );\n wpCertRenderTemplates(filtered);\n });\n }\n\n function wpCertRenderTemplates(list) {\n wpCertNodes.templateList.innerHTML = '';\n list.forEach(t => {\n const item = document.createElement('div');\n item.className = 'wp-cert-template-item';\n item.innerHTML = `\n <div class=\"wp-cert-template-thumb\">${t.title.substring(0,3).toUpperCase()}<\/div>\n <div class=\"wp-cert-template-title\">${t.title}<\/div>\n `;\n item.addEventListener('click', () => {\n document.querySelectorAll('.wp-cert-template-item').forEach(el => el.classList.remove('active'));\n item.classList.add('active');\n wpCertLoadTemplate(t);\n });\n wpCertNodes.templateList.appendChild(item);\n });\n }\n\n \/\/ Load templates instantly into real-time design attributes\n function wpCertLoadTemplate(tmpl) {\n \/\/ Set state colors & apply\n wpCertState.themeColor = tmpl.color;\n wpCertState.accentColor = tmpl.accent;\n wpCertNodes.themeColorInput.value = tmpl.color;\n wpCertNodes.accentColorInput.value = tmpl.accent;\n\n \/\/ Set layout details\n document.querySelector('[data-field=\"title\"]').value = tmpl.textTitle;\n document.querySelector('[data-field=\"subtitle\"]').value = tmpl.subtitle;\n document.querySelector('[data-field=\"description\"]').value = tmpl.desc;\n\n wpCertSyncInputToCanvas();\n wpCertApplyColorsAndStyles();\n wpCertCaptureHistory();\n }\n\n \/\/ Live update fields synchronization\n function wpCertSetupLiveFields() {\n const fields = document.querySelectorAll('.wp-cert-live-field');\n fields.forEach(field => {\n field.addEventListener('input', () => {\n wpCertSyncInputToCanvas();\n });\n });\n }\n\n function wpCertSyncInputToCanvas() {\n document.getElementById('wp-canvas-text-title').innerText = document.querySelector('[data-field=\"title\"]').value;\n document.getElementById('wp-canvas-text-subtitle').innerText = document.querySelector('[data-field=\"subtitle\"]').value;\n document.getElementById('wp-canvas-text-recipient').innerText = document.querySelector('[data-field=\"recipient\"]').value;\n document.getElementById('wp-canvas-text-description').innerText = document.querySelector('[data-field=\"description\"]').value;\n document.getElementById('wp-canvas-text-course').innerText = document.querySelector('[data-field=\"course\"]').value;\n \n document.getElementById('wp-canvas-text-cert-id').innerText = document.querySelector('[data-field=\"cert-id\"]').value;\n document.getElementById('wp-canvas-text-issue-date').innerText = document.querySelector('[data-field=\"issue-date\"]').value;\n\n document.getElementById('wp-canvas-text-signatory').innerText = document.querySelector('[data-field=\"signatory\"]').value;\n document.getElementById('wp-canvas-text-signatory-title').innerText = document.querySelector('[data-field=\"signatory-title\"]').value;\n \n \/\/ Sigs alternative raw text updating\n document.getElementById('wp-canvas-raw-sig-text').innerText = document.querySelector('[data-field=\"signatory\"]').value;\n }\n\n \/\/ Custom uploads loader (Base64 wrapper conversion)\n function wpCertSetupMediaUploads() {\n wpCertRegisterFileUploader('wp-cert-upload-logo', (base64) => {\n \/\/ Replace header \/ top areas with brand logo or just add as a floating seal replacement\n const sealImg = document.getElementById('wp-canvas-img-seal');\n sealImg.src = base64;\n wpCertCaptureHistory();\n });\n\n wpCertRegisterFileUploader('wp-cert-upload-sig', (base64) => {\n const sigContainer = document.getElementById('wp-canvas-container-sig');\n sigContainer.innerHTML = `<img decoding=\"async\" src=\"${base64}\" class=\"wp-cert-media-sig\" alt=\"Signature\">`;\n wpCertCaptureHistory();\n });\n\n wpCertRegisterFileUploader('wp-cert-upload-seal', (base64) => {\n const sealImg = document.getElementById('wp-canvas-img-seal');\n sealImg.src = base64;\n wpCertCaptureHistory();\n });\n\n \/\/ Verification QR changes\n wpCertNodes.qrFieldInput.addEventListener('input', (e) => {\n wpCertState.qrUrl = e.target.value;\n wpCertUpdateQR();\n });\n }\n\n function wpCertRegisterFileUploader(id, callback) {\n document.getElementById(id).addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = function(evt) {\n callback(evt.target.result);\n };\n reader.readAsDataURL(file);\n }\n });\n }\n\n \/\/ Generate Verification Code QR code block dynamically\n function wpCertUpdateQR() {\n wpCertNodes.qrTarget.innerHTML = '';\n if (wpCertState.qrUrl) {\n wpCertQrCodeInstance = new QRCode(wpCertNodes.qrTarget, {\n text: wpCertState.qrUrl,\n width: 50,\n height: 50,\n colorDark : \"#000000\",\n colorLight : \"#ffffff\",\n correctLevel : QRCode.CorrectLevel.H\n });\n }\n }\n\n \/\/ Theme style updates inputs\n function wpCertSetupThemeInputs() {\n wpCertNodes.themeColorInput.addEventListener('input', (e) => {\n wpCertState.themeColor = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n wpCertNodes.accentColorInput.addEventListener('input', (e) => {\n wpCertState.accentColor = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n wpCertNodes.fontFamilySelect.addEventListener('change', (e) => {\n wpCertState.fontFamily = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n wpCertNodes.cornerStyleSelect.addEventListener('change', (e) => {\n wpCertState.cornerStyle = e.target.value;\n wpCertApplyColorsAndStyles();\n });\n }\n\n function wpCertApplyColorsAndStyles() {\n \/\/ Change colors of main decorative borders\n document.getElementById('wp-canvas-element-border-primary').style.borderColor = wpCertState.themeColor;\n document.getElementById('wp-canvas-element-border-secondary').style.borderColor = wpCertState.accentColor;\n \n \/\/ Text changes\n document.getElementById('wp-canvas-text-title').style.color = wpCertState.themeColor;\n document.getElementById('wp-canvas-text-recipient').style.color = wpCertState.themeColor;\n document.getElementById('wp-canvas-text-course').style.color = wpCertState.themeColor;\n\n \/\/ Apply corners\n const corners = document.querySelectorAll('.wp-canvas-corner');\n corners.forEach(corner => {\n corner.style.borderColor = wpCertState.accentColor;\n corner.style.display = wpCertState.cornerStyle === 'none' ? 'none' : 'block';\n if (wpCertState.cornerStyle === 'minimal') {\n corner.style.width = '15px';\n corner.style.height = '15px';\n } else {\n corner.style.width = '30px';\n corner.style.height = '30px';\n }\n });\n\n \/\/ Apply global canvas fonts choice\n wpCertNodes.canvas.style.fontFamily = wpCertState.fontFamily;\n }\n\n \/\/ Drag-and-Drop text\/images placement positioning on A4 landscape canvas\n function wpCertSetupDraggables() {\n const dragItems = document.querySelectorAll('.wp-cert-drag-item');\n let activeDragElement = null;\n let startX, startY, origLeft, origTop;\n\n dragItems.forEach(item => {\n item.addEventListener('mousedown', (e) => {\n activeDragElement = item;\n \n \/\/ Select element highlight styling\n dragItems.forEach(el => el.classList.remove('selected'));\n item.classList.add('selected');\n\n \/\/ Get coordinates relative to preview container scaling limits\n startX = e.clientX;\n startY = e.clientY;\n\n origLeft = item.offsetLeft;\n origTop = item.offsetTop;\n\n document.addEventListener('mousemove', dragMove);\n document.addEventListener('mouseup', dragStop);\n });\n });\n\n function dragMove(e) {\n if (!activeDragElement) return;\n\n const dx = (e.clientX - startX) \/ wpCertState.zoom;\n const dy = (e.clientY - startY) \/ wpCertState.zoom;\n\n activeDragElement.style.left = (origLeft + dx) + 'px';\n activeDragElement.style.top = (origTop + dy) + 'px';\n }\n\n function dragStop() {\n if (activeDragElement) {\n activeDragElement = null;\n document.removeEventListener('mousemove', dragMove);\n document.removeEventListener('mouseup', dragStop);\n wpCertCaptureHistory();\n }\n }\n }\n\n \/\/ Zoom scale controller\n function wpCertSetupZoomControls() {\n wpCertNodes.btnZoomIn.addEventListener('click', () => {\n wpCertState.zoom = Math.min(1.5, wpCertState.zoom + 0.1);\n wpCertApplyZoom();\n });\n wpCertNodes.btnZoomOut.addEventListener('click', () => {\n wpCertState.zoom = Math.max(0.4, wpCertState.zoom - 0.1);\n wpCertApplyZoom();\n });\n }\n\n function wpCertApplyZoom() {\n wpCertNodes.zoomIndicator.innerText = Math.round(wpCertState.zoom * 100) + '%';\n wpCertNodes.canvas.style.transform = `scale(${wpCertState.zoom})`;\n }\n\n \/\/ Toggle orientation Layout (landscape vs portrait dimensions)\n function wpCertToggleOrientation() {\n if (wpCertState.orientation === 'landscape') {\n wpCertState.orientation = 'portrait';\n wpCertNodes.canvas.classList.add('portrait');\n document.getElementById('wp-cert-layout-indicator').innerText = 'Portrait';\n } else {\n wpCertState.orientation = 'landscape';\n wpCertNodes.canvas.classList.remove('portrait');\n document.getElementById('wp-cert-layout-indicator').innerText = 'Landscape';\n }\n wpCertCaptureHistory();\n }\n\n \/\/ PDF generation & Export high resolution engine\n function wpCertExportPDF() {\n const target = wpCertNodes.canvas;\n const opt = {\n margin: 0,\n filename: 'Certificate.pdf',\n image: { type: 'jpeg', quality: 0.98 },\n html2canvas: { scale: 2, useCORS: true, logging: false },\n jsPDF: { unit: 'mm', format: 'a4', orientation: wpCertState.orientation }\n };\n\n \/\/ Standardise scale matrix transformation safely for capture export process\n const prevTransform = target.style.transform;\n target.style.transform = 'none';\n\n html2pdf().from(target).set(opt).save().then(() => {\n target.style.transform = prevTransform;\n });\n }\n\n \/\/ Native browser print layouts\n function wpCertPrintCertificate() {\n const content = wpCertNodes.canvas.outerHTML;\n const printWindow = window.open('', '_blank');\n printWindow.document.write(`\n <html>\n <head>\n <title>Print Certificate<\/title>\n <style>\n body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }\n .wp-cert-canvas-frame { width: 842px; height: 595px; border: none; box-shadow: none; position: relative; font-family: ${wpCertState.fontFamily}; }\n .portrait { width: 595px !important; height: 842px !important; }\n .wp-cert-art-border { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; border: 4px solid ${wpCertState.themeColor}; }\n .wp-cert-art-border-double { position: absolute; top: 26px; left: 26px; right: 26px; bottom: 26px; border: 1px solid ${wpCertState.accentColor}; }\n .wp-cert-corner-decor { position: absolute; width: 30px; height: 30px; border-color: ${wpCertState.accentColor}; border-style: solid; }\n .wp-cert-corner-top-left { top: 32px; left: 32px; border-width: 3px 0 0 3px; }\n .wp-cert-corner-top-right { top: 32px; right: 32px; border-width: 3px 3px 0 0; }\n .wp-cert-corner-bottom-left { bottom: 32px; left: 32px; border-width: 0 0 3px 3px; }\n .wp-cert-corner-bottom-right { bottom: 32px; right: 32px; border-width: 0 3px 3px 0; }\n .wp-cert-drag-item { position: absolute; text-align: center; }\n .wp-cert-pos-title { top: 12%; left: 10%; width: 80%; }\n .wp-cert-pos-subtitle { top: 22%; left: 15%; width: 70%; }\n .wp-cert-pos-recipient { top: 34%; left: 15%; width: 70%; }\n .wp-cert-pos-description { top: 48%; left: 15%; width: 70%; }\n .wp-cert-pos-course { top: 60%; left: 15%; width: 70%; }\n .wp-cert-pos-meta-left { bottom: 12%; left: 10%; width: 25%; }\n .wp-cert-pos-meta-center { bottom: 8%; left: 37.5%; width: 25%; }\n .wp-cert-pos-meta-right { bottom: 12%; right: 10%; width: 25%; }\n img { max-width: 100%; height: auto; }\n #wp-canvas-qr-target img { display: inline-block !important; }\n @page { size: A4 ${wpCertState.orientation}; margin: 0; }\n <\/style>\n <\/head>\n <body onload=\"window.print(); window.close();\">\n ${content}\n <\/body>\n <\/html>\n `);\n printWindow.document.close();\n }\n\n \/\/ Helper: generate IDs easily\n function wpCertGenerateRandomId() {\n const randomNum = Math.floor(1000 + Math.random() * 9000);\n const year = new Date().getFullYear();\n document.getElementById('wp-cert-field-id').value = `CERT-${year}-${randomNum}`;\n wpCertSyncInputToCanvas();\n wpCertCaptureHistory();\n }\n\n \/\/ Undo \/ Redo engine tracking snapshot\n function wpCertCaptureHistory() {\n const currentData = {\n title: document.querySelector('[data-field=\"title\"]').value,\n subtitle: document.querySelector('[data-field=\"subtitle\"]').value,\n recipient: document.querySelector('[data-field=\"recipient\"]').value,\n desc: document.querySelector('[data-field=\"description\"]').value,\n course: document.querySelector('[data-field=\"course\"]').value,\n certId: document.querySelector('[data-field=\"cert-id\"]').value,\n date: document.querySelector('[data-field=\"issue-date\"]').value,\n themeColor: wpCertState.themeColor,\n accentColor: wpCertState.accentColor,\n fontFamily: wpCertState.fontFamily,\n orientation: wpCertState.orientation,\n cornerStyle: wpCertState.cornerStyle,\n qrUrl: wpCertState.qrUrl\n };\n\n \/\/ Overwrite standard forward line if user edited in between\n if (wpCertState.historyIndex < wpCertState.history.length - 1) {\n wpCertState.history = wpCertState.history.slice(0, wpCertState.historyIndex + 1);\n }\n\n wpCertState.history.push(currentData);\n wpCertState.historyIndex++;\n }\n\n function wpCertUndoAction() {\n if (wpCertState.historyIndex > 0) {\n wpCertState.historyIndex--;\n wpCertRestoreFromHistory(wpCertState.history[wpCertState.historyIndex]);\n }\n }\n\n function wpCertRedoAction() {\n if (wpCertState.historyIndex < wpCertState.history.length - 1) {\n wpCertState.historyIndex++;\n wpCertRestoreFromHistory(wpCertState.history[wpCertState.historyIndex]);\n }\n }\n\n function wpCertRestoreFromHistory(stateObj) {\n if (!stateObj) return;\n\n document.querySelector('[data-field=\"title\"]').value = stateObj.title;\n document.querySelector('[data-field=\"subtitle\"]').value = stateObj.subtitle;\n document.querySelector('[data-field=\"recipient\"]').value = stateObj.recipient;\n document.querySelector('[data-field=\"description\"]').value = stateObj.desc;\n document.querySelector('[data-field=\"course\"]').value = stateObj.course;\n document.querySelector('[data-field=\"cert-id\"]').value = stateObj.certId;\n document.querySelector('[data-field=\"issue-date\"]').value = stateObj.date;\n\n wpCertState.themeColor = stateObj.themeColor;\n wpCertState.accentColor = stateObj.accentColor;\n wpCertState.fontFamily = stateObj.fontFamily;\n wpCertState.orientation = stateObj.orientation;\n wpCertState.cornerStyle = stateObj.cornerStyle;\n wpCertState.qrUrl = stateObj.qrUrl;\n\n wpCertNodes.themeColorInput.value = stateObj.themeColor;\n wpCertNodes.accentColorInput.value = stateObj.accentColor;\n wpCertNodes.fontFamilySelect.value = stateObj.fontFamily;\n wpCertNodes.cornerStyleSelect.value = stateObj.cornerStyle;\n wpCertNodes.qrFieldInput.value = stateObj.qrUrl;\n\n if (wpCertState.orientation === 'portrait') {\n wpCertNodes.canvas.classList.add('portrait');\n } else {\n wpCertNodes.canvas.classList.remove('portrait');\n }\n\n wpCertSyncInputToCanvas();\n wpCertApplyColorsAndStyles();\n wpCertUpdateQR();\n }\n\n function wpCertResetWorkspace() {\n if (confirm('Are you sure you want to reset all modifications?')) {\n document.querySelector('[data-field=\"title\"]').value = 'CERTIFICATE OF APPRECIATION';\n document.querySelector('[data-field=\"subtitle\"]').value = 'This is proudly presented to';\n document.querySelector('[data-field=\"recipient\"]').value = 'Jane Doe';\n document.querySelector('[data-field=\"description\"]').value = 'for successfully completing all requirements of the professional program';\n document.querySelector('[data-field=\"course\"]').value = 'Advanced Full-Stack Engineering 2026';\n \n wpCertState.themeColor = '#1e293b';\n wpCertState.accentColor = '#c5a880';\n wpCertState.fontFamily = \"'Georgia', serif\";\n wpCertState.cornerStyle = 'classic';\n wpCertState.orientation = 'landscape';\n wpCertNodes.canvas.classList.remove('portrait');\n\n wpCertSyncInputToCanvas();\n wpCertApplyColorsAndStyles();\n wpCertCaptureHistory();\n }\n }\n\n \/\/ Launch Application inside scope safely\n wpCertInit();\n\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Professional Certificate Generator Premium Certificate Engine Design, customize and export high-resolution A4 awards instantly Reset Export High-Res PDF 1. Choose Template Layout Landscape 2. Customize Fields Content Styling Images & Verification Certificate Header \/ Title Sub-text\/Purpose Recipient Full Name Presentation Description Course \/ Achievement Name Issue Date Certificate ID \ud83c\udfb2 Authorized Signatory Signatory Title Primary […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-498","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":1,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/498\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/498\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}