Professional Aadhaar Joiner Tool<\/title>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\" \/>\n\n <style>\n :root {\n --primary: #3b82f6;\n --primary-hover: #2563eb;\n --secondary: #f1f5f9;\n --secondary-hover: #e2e8f0;\n --success: #10b981;\n --success-hover: #059669;\n --text-main: #0f172a;\n --text-muted: #64748b;\n --bg-body: #f8fafc;\n --bg-card: #ffffff;\n --border: #cbd5e1;\n --radius-md: 12px;\n --radius-lg: 16px;\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }\n\n body {\n background-color: var(--bg-body);\n color: var(--text-main);\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* Header *\/\n header {\n background: var(--bg-card);\n padding: 1.5rem 1rem;\n text-align: center;\n box-shadow: var(--shadow-sm);\n border-bottom: 1px solid var(--border);\n }\n\n header h1 { \n color: var(--primary-hover); \n font-size: 1.75rem; \n font-weight: 700;\n margin-bottom: 0.25rem;\n }\n \n header p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0.75rem; }\n \n .badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background-color: #dbeafe; \n color: #1e40af; \n font-size: 0.75rem;\n padding: 4px 10px; \n border-radius: 20px; \n font-weight: 600;\n }\n\n \/* Main Container *\/\n .container {\n max-width: 1000px;\n margin: 2rem auto;\n padding: 1.5rem;\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-md);\n width: 95%;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n\n \/* Responsive Grid for Uploads *\/\n .upload-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n\n @media (min-width: 768px) {\n .upload-grid { grid-template-columns: 1fr 1fr; }\n .container { padding: 2.5rem; }\n }\n\n \/* Upload Sections *\/\n .section-title {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 0.75rem;\n color: var(--text-main);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .upload-box {\n border: 2px dashed var(--border);\n border-radius: var(--radius-md);\n padding: 2rem 1rem;\n text-align: center;\n cursor: pointer;\n background: var(--bg-body);\n position: relative;\n transition: all 0.2s ease;\n min-height: 220px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n .upload-box:hover { border-color: var(--primary); background: #eff6ff; }\n .upload-box.active { border-color: var(--success); background: #f0fdf4; border-style: solid; }\n\n .upload-box input {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n opacity: 0; cursor: pointer; z-index: 10;\n }\n\n .upload-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n color: var(--text-muted);\n }\n\n .upload-content svg { width: 48px; height: 48px; fill: var(--primary); opacity: 0.8; }\n .upload-content span { font-weight: 500; font-size: 0.95rem; }\n .upload-content small { font-size: 0.8rem; opacity: 0.7; }\n\n .preview-img {\n max-width: 100%;\n max-height: 190px;\n border-radius: 8px;\n box-shadow: var(--shadow-sm);\n display: none;\n object-fit: contain;\n position: relative;\n z-index: 5;\n }\n\n \/* Buttons *\/\n .btn {\n background-color: var(--primary);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n border-radius: 8px;\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n }\n @media (min-width: 480px) { .btn { width: auto; min-width: 160px; } }\n \n .btn:hover { background-color: var(--primary-hover); }\n .btn:active { transform: scale(0.98); }\n .btn:disabled { background-color: var(--border); cursor: not-allowed; opacity: 0.7; transform: none; color: #fff; }\n \n .btn-success { background-color: var(--success); }\n .btn-success:hover { background-color: var(--success-hover); }\n .btn-outline { background-color: transparent; border: 1px solid var(--border); color: var(--text-main); }\n .btn-outline:hover { background-color: var(--secondary-hover); }\n\n .action-center {\n text-align: center;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border);\n }\n\n \/* Result Section *\/\n .result-area {\n background: var(--secondary);\n padding: 1.5rem;\n border-radius: var(--radius-md);\n min-height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--border);\n margin-bottom: 1.5rem;\n }\n \n \/* MAGIC FIX FOR RESPONSIVE CANVAS *\/\n canvas { \n max-width: 100%; \n height: auto; \n border-radius: 8px; \n box-shadow: var(--shadow-md); \n display: none; \n background: white;\n }\n\n .placeholder-text { color: var(--text-muted); font-size: 0.95rem; font-weight: 500; }\n\n \/* Compression Section *\/\n .download-tools {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n background: var(--bg-body);\n padding: 1.25rem;\n border-radius: var(--radius-md);\n border: 1px solid var(--border);\n }\n @media (min-width: 600px) {\n .download-tools { flex-direction: row; justify-content: center; }\n }\n\n .input-group {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n font-size: 0.95rem;\n }\n\n .input-group input {\n padding: 0.5rem;\n border: 1px solid var(--border);\n border-radius: 6px;\n width: 90px;\n text-align: center;\n font-weight: 600;\n font-size: 1rem;\n transition: border-color 0.2s;\n }\n .input-group input:focus { border-color: var(--primary); outline: none; }\n\n #file-info {\n font-size: 0.85rem;\n color: var(--success-hover);\n font-weight: 600;\n margin-top: 8px;\n display: none;\n text-align: center;\n }\n\n \/* Modal Styles *\/\n .modal {\n display: none; \n position: fixed; \n z-index: 1000; \n left: 0; top: 0; \n width: 100%; height: 100%; \n background-color: rgba(15, 23, 42, 0.85);\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(4px);\n padding: 1rem;\n }\n\n .modal-content {\n background-color: var(--bg-card);\n padding: 1.5rem;\n border-radius: var(--radius-lg);\n width: 100%;\n max-width: 650px;\n box-shadow: var(--shadow-lg);\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n max-height: 95vh;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .modal-header h3 { font-size: 1.25rem; }\n \n .crop-container {\n height: 45vh; \/* Responsive height *\/\n min-height: 250px;\n background: repeating-conic-gradient(#f1f5f9 0% 25%, #ffffff 0% 50%) 50% \/ 20px 20px;\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid var(--border);\n }\n .crop-container img { max-width: 100%; display: block; }\n\n \/* Rotation Controls Toolbar *\/\n .rotation-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 15px;\n background: var(--bg-body);\n padding: 12px;\n border-radius: 8px;\n border: 1px solid var(--border);\n }\n\n .rotate-btn {\n width: 40px; height: 40px;\n display: flex; align-items: center; justify-content: center;\n background-color: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 6px;\n cursor: pointer;\n font-size: 1.2rem;\n color: var(--text-main);\n transition: 0.2s;\n box-shadow: var(--shadow-sm);\n }\n .rotate-btn:hover { background-color: var(--secondary-hover); }\n\n .slider-group {\n flex-grow: 1; display: flex; align-items: center; gap: 10px; min-width: 180px;\n }\n .slider-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }\n \n input[type=range] {\n flex: 1; height: 6px; background: var(--border);\n border-radius: 5px; appearance: none; cursor: pointer;\n }\n input[type=range]::-webkit-slider-thumb {\n appearance: none; width: 18px; height: 18px;\n background: var(--primary); border-radius: 50%; box-shadow: var(--shadow-sm);\n }\n\n .modal-actions {\n display: flex; justify-content: flex-end; gap: 10px;\n border-top: 1px solid var(--border); padding-top: 1rem;\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <h1>Aadhaar Joiner Pro<\/h1>\n <p>Upload, Auto-Crop, Rotate & Merge Seamlessly<\/p>\n <div class=\"badge\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg>\n 100% Secure Local Processing\n <\/div>\n<\/header>\n\n<div class=\"container\">\n \n <div class=\"upload-grid\">\n \n <div>\n <div class=\"section-title\">1. Front Side<\/div>\n <div class=\"upload-box\" id=\"box-front\">\n <input type=\"file\" id=\"input-front\" accept=\"image\/*\">\n <div class=\"upload-content\" id=\"content-front\">\n \n <svg viewBox=\"0 0 24 24\"><path d=\"M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z\" \/><\/svg>\n <span>Click or Tap to Upload Front<\/span>\n <small>JPG, PNG supported<\/small>\n <\/div>\n <img id=\"view-front\" class=\"preview-img\" alt=\"Front Preview\">\n <\/div>\n <\/div>\n\n \n <div>\n <div class=\"section-title\">2. Back Side<\/div>\n <div class=\"upload-box\" id=\"box-back\">\n <input type=\"file\" id=\"input-back\" accept=\"image\/*\">\n <div class=\"upload-content\" id=\"content-back\">\n \n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4M20 18H4V12H20V18M20 8H4V6H20V8M4 15H11V17H4V15Z\" \/><\/svg>\n <span>Click or Tap to Upload Back<\/span>\n <small>JPG, PNG supported<\/small>\n <\/div>\n <img id=\"view-back\" class=\"preview-img\" alt=\"Back Preview\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"action-center\">\n <button class=\"btn\" onclick=\"mergeImages()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\"\/><\/svg>\n Generate Final Document\n <\/button>\n <\/div>\n\n \n <div>\n <div class=\"section-title\">3. Final Document & Download<\/div>\n <div class=\"result-area\">\n <span id=\"placeholder\" class=\"placeholder-text\">Merged preview will appear here…<\/span>\n <canvas id=\"finalCanvas\"><\/canvas>\n <\/div>\n\n <div class=\"download-tools\">\n <div class=\"input-group\">\n <label for=\"target-size\">Target Size:<\/label>\n <input type=\"number\" id=\"target-size\" value=\"400\" min=\"50\" max=\"2000\">\n <span>KB<\/span>\n <\/div>\n \n <button id=\"dl-btn\" class=\"btn btn-success\" disabled onclick=\"downloadCompressed()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\n Download Card\n <\/button>\n <\/div>\n <div id=\"file-info\"><\/div>\n <\/div>\n\n<\/div>\n\n\n<div id=\"cropModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h3>Adjust Document Setup<\/h3>\n <\/div>\n \n <div class=\"crop-container\">\n <img decoding=\"async\" id=\"image-to-crop\" src=\"\">\n <\/div>\n \n <div class=\"rotation-toolbar\">\n <button class=\"rotate-btn\" onclick=\"rotate90(-90)\" title=\"Rotate Left 90\u00b0\">\u21ba<\/button>\n <button class=\"rotate-btn\" onclick=\"rotate90(90)\" title=\"Rotate Right 90\u00b0\">\u21bb<\/button>\n \n <div class=\"slider-group\">\n <label>Straighten:<\/label>\n <input type=\"range\" id=\"rotate-slider\" min=\"-45\" max=\"45\" value=\"0\" step=\"0.5\">\n <span id=\"rotate-val\" style=\"width: 35px; text-align:right; font-size:0.85rem;\">0\u00b0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"modal-actions\">\n <button class=\"btn btn-outline\" onclick=\"closeModal()\">Cancel<\/button>\n <button class=\"btn\" onclick=\"finishCrop()\">Apply & Save<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\n<script>\n let cropper;\n let currentSide = null;\n let frontImageObj = null;\n let backImageObj = null;\n\n const modal = document.getElementById('cropModal');\n const imageElement = document.getElementById('image-to-crop');\n const rotateSlider = document.getElementById('rotate-slider');\n const rotateValDisplay = document.getElementById('rotate-val');\n\n \/\/ Setup Listeners\n document.getElementById('input-front').addEventListener('change', (e) => handleFile(e, 'front'));\n document.getElementById('input-back').addEventListener('change', (e) => handleFile(e, 'back'));\n\n function handleFile(e, side) {\n const file = e.target.files[0];\n if (file) {\n currentSide = side;\n const reader = new FileReader();\n reader.onload = (event) => {\n imageElement.src = event.target.result;\n openModal();\n \n if(cropper) cropper.destroy();\n \n cropper = new Cropper(imageElement, {\n viewMode: 2, \/\/ Restricts crop box to not exceed canvas\n autoCropArea: 0.95,\n responsive: true,\n background: false,\n ready() {\n rotateSlider.value = 0;\n rotateValDisplay.innerText = \"0\u00b0\";\n }\n });\n e.target.value = ''; \/\/ Reset input so same file can be selected again if needed\n };\n reader.readAsDataURL(file);\n }\n }\n\n \/\/ 90 Degree Rotation\n function rotate90(deg) {\n if(cropper) {\n cropper.rotate(deg);\n rotateSlider.value = 0;\n rotateValDisplay.innerText = \"0\u00b0\";\n }\n }\n\n \/\/ Fine Tuning Slider\n rotateSlider.addEventListener('input', function() {\n const val = parseFloat(this.value);\n rotateValDisplay.innerText = val + \"\u00b0\";\n if (cropper) {\n cropper.rotateTo(val);\n }\n });\n\n function openModal() { modal.style.display = 'flex'; }\n function closeModal() { \n modal.style.display = 'none'; \n if(cropper) cropper.destroy();\n }\n\n function finishCrop() {\n if (!cropper) return;\n\n \/\/ Extract high-quality crop\n const canvas = cropper.getCroppedCanvas({\n maxWidth: 1500,\n maxHeight: 1500,\n fillColor: '#fff' \/\/ fill transparent png backgrounds with white\n });\n\n const croppedDataUrl = canvas.toDataURL('image\/jpeg', 0.95);\n\n \/\/ Update UI\n const previewImg = document.getElementById(currentSide === 'front' ? 'view-front' : 'view-back');\n const contentDiv = document.getElementById(currentSide === 'front' ? 'content-front' : 'content-back');\n const boxDiv = document.getElementById(currentSide === 'front' ? 'box-front' : 'box-back');\n\n previewImg.src = croppedDataUrl;\n previewImg.style.display = 'block';\n contentDiv.style.display = 'none';\n boxDiv.classList.add('active');\n\n \/\/ Store internally for merging\n const imgObj = new Image();\n imgObj.src = croppedDataUrl;\n \n if (currentSide === 'front') frontImageObj = imgObj;\n else backImageObj = imgObj;\n\n closeModal();\n }\n\n function mergeImages() {\n if (!frontImageObj || !backImageObj) {\n alert(\"\u26a0\ufe0f Please upload and crop both Front and Back sides first.\");\n return;\n }\n\n const canvas = document.getElementById('finalCanvas');\n const ctx = canvas.getContext('2d');\n const placeholder = document.getElementById('placeholder');\n const dlBtn = document.getElementById('dl-btn');\n\n \/\/ Dimensions for an A4 print quality canvas\n const cardWidth = 1000;\n const cardHeight = 630;\n const gap = 60;\n const padding = 50;\n\n const totalWidth = (cardWidth * 2) + gap + (padding * 2);\n const totalHeight = cardHeight + (padding * 2);\n\n \/\/ Internal canvas resolution (High Quality)\n canvas.width = totalWidth;\n canvas.height = totalHeight;\n\n \/\/ White background\n ctx.fillStyle = \"#ffffff\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ Draw Images\n ctx.drawImage(frontImageObj, padding, padding, cardWidth, cardHeight);\n ctx.drawImage(backImageObj, padding + cardWidth + gap, padding, cardWidth, cardHeight);\n\n \/\/ Optional: Draw subtle border around cards\n ctx.strokeStyle = \"#cbd5e1\";\n ctx.lineWidth = 3;\n ctx.strokeRect(padding, padding, cardWidth, cardHeight);\n ctx.strokeRect(padding + cardWidth + gap, padding, cardWidth, cardHeight);\n\n \/\/ UI Updates\n placeholder.style.display = 'none';\n canvas.style.display = 'block';\n dlBtn.disabled = false;\n \n \/\/ Smooth scroll to result on mobile\n canvas.scrollIntoView({behavior: \"smooth\", block: \"center\"});\n }\n\n async function downloadCompressed() {\n const canvas = document.getElementById('finalCanvas');\n const targetKB = parseInt(document.getElementById('target-size').value) || 400;\n const dlBtn = document.getElementById('dl-btn');\n const infoDiv = document.getElementById('file-info');\n \n \/\/ Button state\n const originalText = dlBtn.innerHTML;\n dlBtn.innerHTML = \"Processing...\";\n dlBtn.disabled = true;\n\n const targetBytes = targetKB * 1024;\n let quality = 0.95;\n let blob = await getCanvasBlob(canvas, quality);\n\n \/\/ Auto-Compress logic\n let attempts = 0;\n while (blob.size > targetBytes && quality > 0.1 && attempts < 15) {\n quality -= 0.05;\n blob = await getCanvasBlob(canvas, quality);\n attempts++;\n }\n\n \/\/ Trigger Download\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = `Aadhaar_Merged_${targetKB}KB.jpg`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n\n \/\/ Reset Button state\n dlBtn.innerHTML = originalText;\n dlBtn.disabled = false;\n \n infoDiv.style.display = 'block';\n infoDiv.innerText = `\u2705 Success! File saved at ${(blob.size \/ 1024).toFixed(1)} KB`;\n }\n\n function getCanvasBlob(canvas, quality) {\n return new Promise(resolve => {\n canvas.toBlob(blob => { resolve(blob); }, 'image\/jpeg', quality);\n });\n }\n\n \/\/ Close modal if user clicks outside of it\n window.onclick = function(event) {\n if (event.target == modal) closeModal();\n }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Professional Aadhaar Joiner Tool Aadhaar Joiner Pro Upload, Auto-Crop, Rotate & Merge Seamlessly 100% Secure Local Processing 1. … <\/p>\n<p class=\"read-more-container\"><a title=\"Aadhaar Joiner Pro\" class=\"read-more button\" href=\"https:\/\/bkupdate.in\/?page_id=5035#more-5035\" aria-label=\"Read more about Aadhaar Joiner Pro\">Read more<\/a><\/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-5035","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages\/5035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bkupdate.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5035"}],"version-history":[{"count":2,"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages\/5035\/revisions"}],"predecessor-version":[{"id":5037,"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages\/5035\/revisions\/5037"}],"wp:attachment":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5035,"date":"2026-04-12T08:12:21","date_gmt":"2026-04-12T08:12:21","guid":{"rendered":"https:\/\/bkupdate.in\/?page_id=5035"},"modified":"2026-04-12T08:20:16","modified_gmt":"2026-04-12T08:20:16","slug":"aadhaar-joiner-pro","status":"publish","type":"page","link":"https:\/\/bkupdate.in\/?page_id=5035","title":{"rendered":"Aadhaar Joiner Pro"},"content":{"rendered":"\n\n\n\n \n \n Professional Aadhaar Joiner Tool<\/title>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\" \/>\n\n <style>\n :root {\n --primary: #3b82f6;\n --primary-hover: #2563eb;\n --secondary: #f1f5f9;\n --secondary-hover: #e2e8f0;\n --success: #10b981;\n --success-hover: #059669;\n --text-main: #0f172a;\n --text-muted: #64748b;\n --bg-body: #f8fafc;\n --bg-card: #ffffff;\n --border: #cbd5e1;\n --radius-md: 12px;\n --radius-lg: 16px;\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }\n\n body {\n background-color: var(--bg-body);\n color: var(--text-main);\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* Header *\/\n header {\n background: var(--bg-card);\n padding: 1.5rem 1rem;\n text-align: center;\n box-shadow: var(--shadow-sm);\n border-bottom: 1px solid var(--border);\n }\n\n header h1 { \n color: var(--primary-hover); \n font-size: 1.75rem; \n font-weight: 700;\n margin-bottom: 0.25rem;\n }\n \n header p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0.75rem; }\n \n .badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background-color: #dbeafe; \n color: #1e40af; \n font-size: 0.75rem;\n padding: 4px 10px; \n border-radius: 20px; \n font-weight: 600;\n }\n\n \/* Main Container *\/\n .container {\n max-width: 1000px;\n margin: 2rem auto;\n padding: 1.5rem;\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-md);\n width: 95%;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n\n \/* Responsive Grid for Uploads *\/\n .upload-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n\n @media (min-width: 768px) {\n .upload-grid { grid-template-columns: 1fr 1fr; }\n .container { padding: 2.5rem; }\n }\n\n \/* Upload Sections *\/\n .section-title {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 0.75rem;\n color: var(--text-main);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .upload-box {\n border: 2px dashed var(--border);\n border-radius: var(--radius-md);\n padding: 2rem 1rem;\n text-align: center;\n cursor: pointer;\n background: var(--bg-body);\n position: relative;\n transition: all 0.2s ease;\n min-height: 220px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n .upload-box:hover { border-color: var(--primary); background: #eff6ff; }\n .upload-box.active { border-color: var(--success); background: #f0fdf4; border-style: solid; }\n\n .upload-box input {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n opacity: 0; cursor: pointer; z-index: 10;\n }\n\n .upload-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n color: var(--text-muted);\n }\n\n .upload-content svg { width: 48px; height: 48px; fill: var(--primary); opacity: 0.8; }\n .upload-content span { font-weight: 500; font-size: 0.95rem; }\n .upload-content small { font-size: 0.8rem; opacity: 0.7; }\n\n .preview-img {\n max-width: 100%;\n max-height: 190px;\n border-radius: 8px;\n box-shadow: var(--shadow-sm);\n display: none;\n object-fit: contain;\n position: relative;\n z-index: 5;\n }\n\n \/* Buttons *\/\n .btn {\n background-color: var(--primary);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n border-radius: 8px;\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n }\n @media (min-width: 480px) { .btn { width: auto; min-width: 160px; } }\n \n .btn:hover { background-color: var(--primary-hover); }\n .btn:active { transform: scale(0.98); }\n .btn:disabled { background-color: var(--border); cursor: not-allowed; opacity: 0.7; transform: none; color: #fff; }\n \n .btn-success { background-color: var(--success); }\n .btn-success:hover { background-color: var(--success-hover); }\n .btn-outline { background-color: transparent; border: 1px solid var(--border); color: var(--text-main); }\n .btn-outline:hover { background-color: var(--secondary-hover); }\n\n .action-center {\n text-align: center;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border);\n }\n\n \/* Result Section *\/\n .result-area {\n background: var(--secondary);\n padding: 1.5rem;\n border-radius: var(--radius-md);\n min-height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--border);\n margin-bottom: 1.5rem;\n }\n \n \/* MAGIC FIX FOR RESPONSIVE CANVAS *\/\n canvas { \n max-width: 100%; \n height: auto; \n border-radius: 8px; \n box-shadow: var(--shadow-md); \n display: none; \n background: white;\n }\n\n .placeholder-text { color: var(--text-muted); font-size: 0.95rem; font-weight: 500; }\n\n \/* Compression Section *\/\n .download-tools {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n background: var(--bg-body);\n padding: 1.25rem;\n border-radius: var(--radius-md);\n border: 1px solid var(--border);\n }\n @media (min-width: 600px) {\n .download-tools { flex-direction: row; justify-content: center; }\n }\n\n .input-group {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n font-size: 0.95rem;\n }\n\n .input-group input {\n padding: 0.5rem;\n border: 1px solid var(--border);\n border-radius: 6px;\n width: 90px;\n text-align: center;\n font-weight: 600;\n font-size: 1rem;\n transition: border-color 0.2s;\n }\n .input-group input:focus { border-color: var(--primary); outline: none; }\n\n #file-info {\n font-size: 0.85rem;\n color: var(--success-hover);\n font-weight: 600;\n margin-top: 8px;\n display: none;\n text-align: center;\n }\n\n \/* Modal Styles *\/\n .modal {\n display: none; \n position: fixed; \n z-index: 1000; \n left: 0; top: 0; \n width: 100%; height: 100%; \n background-color: rgba(15, 23, 42, 0.85);\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(4px);\n padding: 1rem;\n }\n\n .modal-content {\n background-color: var(--bg-card);\n padding: 1.5rem;\n border-radius: var(--radius-lg);\n width: 100%;\n max-width: 650px;\n box-shadow: var(--shadow-lg);\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n max-height: 95vh;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .modal-header h3 { font-size: 1.25rem; }\n \n .crop-container {\n height: 45vh; \/* Responsive height *\/\n min-height: 250px;\n background: repeating-conic-gradient(#f1f5f9 0% 25%, #ffffff 0% 50%) 50% \/ 20px 20px;\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid var(--border);\n }\n .crop-container img { max-width: 100%; display: block; }\n\n \/* Rotation Controls Toolbar *\/\n .rotation-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 15px;\n background: var(--bg-body);\n padding: 12px;\n border-radius: 8px;\n border: 1px solid var(--border);\n }\n\n .rotate-btn {\n width: 40px; height: 40px;\n display: flex; align-items: center; justify-content: center;\n background-color: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 6px;\n cursor: pointer;\n font-size: 1.2rem;\n color: var(--text-main);\n transition: 0.2s;\n box-shadow: var(--shadow-sm);\n }\n .rotate-btn:hover { background-color: var(--secondary-hover); }\n\n .slider-group {\n flex-grow: 1; display: flex; align-items: center; gap: 10px; min-width: 180px;\n }\n .slider-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }\n \n input[type=range] {\n flex: 1; height: 6px; background: var(--border);\n border-radius: 5px; appearance: none; cursor: pointer;\n }\n input[type=range]::-webkit-slider-thumb {\n appearance: none; width: 18px; height: 18px;\n background: var(--primary); border-radius: 50%; box-shadow: var(--shadow-sm);\n }\n\n .modal-actions {\n display: flex; justify-content: flex-end; gap: 10px;\n border-top: 1px solid var(--border); padding-top: 1rem;\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <h1>Aadhaar Joiner Pro<\/h1>\n <p>Upload, Auto-Crop, Rotate & Merge Seamlessly<\/p>\n <div class=\"badge\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg>\n 100% Secure Local Processing\n <\/div>\n<\/header>\n\n<div class=\"container\">\n \n <div class=\"upload-grid\">\n \n <div>\n <div class=\"section-title\">1. Front Side<\/div>\n <div class=\"upload-box\" id=\"box-front\">\n <input type=\"file\" id=\"input-front\" accept=\"image\/*\">\n <div class=\"upload-content\" id=\"content-front\">\n \n <svg viewBox=\"0 0 24 24\"><path d=\"M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z\" \/><\/svg>\n <span>Click or Tap to Upload Front<\/span>\n <small>JPG, PNG supported<\/small>\n <\/div>\n <img id=\"view-front\" class=\"preview-img\" alt=\"Front Preview\">\n <\/div>\n <\/div>\n\n \n <div>\n <div class=\"section-title\">2. Back Side<\/div>\n <div class=\"upload-box\" id=\"box-back\">\n <input type=\"file\" id=\"input-back\" accept=\"image\/*\">\n <div class=\"upload-content\" id=\"content-back\">\n \n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4M20 18H4V12H20V18M20 8H4V6H20V8M4 15H11V17H4V15Z\" \/><\/svg>\n <span>Click or Tap to Upload Back<\/span>\n <small>JPG, PNG supported<\/small>\n <\/div>\n <img id=\"view-back\" class=\"preview-img\" alt=\"Back Preview\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"action-center\">\n <button class=\"btn\" onclick=\"mergeImages()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\"\/><\/svg>\n Generate Final Document\n <\/button>\n <\/div>\n\n \n <div>\n <div class=\"section-title\">3. Final Document & Download<\/div>\n <div class=\"result-area\">\n <span id=\"placeholder\" class=\"placeholder-text\">Merged preview will appear here…<\/span>\n <canvas id=\"finalCanvas\"><\/canvas>\n <\/div>\n\n <div class=\"download-tools\">\n <div class=\"input-group\">\n <label for=\"target-size\">Target Size:<\/label>\n <input type=\"number\" id=\"target-size\" value=\"400\" min=\"50\" max=\"2000\">\n <span>KB<\/span>\n <\/div>\n \n <button id=\"dl-btn\" class=\"btn btn-success\" disabled onclick=\"downloadCompressed()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\n Download Card\n <\/button>\n <\/div>\n <div id=\"file-info\"><\/div>\n <\/div>\n\n<\/div>\n\n\n<div id=\"cropModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h3>Adjust Document Setup<\/h3>\n <\/div>\n \n <div class=\"crop-container\">\n <img decoding=\"async\" id=\"image-to-crop\" src=\"\">\n <\/div>\n \n <div class=\"rotation-toolbar\">\n <button class=\"rotate-btn\" onclick=\"rotate90(-90)\" title=\"Rotate Left 90\u00b0\">\u21ba<\/button>\n <button class=\"rotate-btn\" onclick=\"rotate90(90)\" title=\"Rotate Right 90\u00b0\">\u21bb<\/button>\n \n <div class=\"slider-group\">\n <label>Straighten:<\/label>\n <input type=\"range\" id=\"rotate-slider\" min=\"-45\" max=\"45\" value=\"0\" step=\"0.5\">\n <span id=\"rotate-val\" style=\"width: 35px; text-align:right; font-size:0.85rem;\">0\u00b0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"modal-actions\">\n <button class=\"btn btn-outline\" onclick=\"closeModal()\">Cancel<\/button>\n <button class=\"btn\" onclick=\"finishCrop()\">Apply & Save<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\n<script>\n let cropper;\n let currentSide = null;\n let frontImageObj = null;\n let backImageObj = null;\n\n const modal = document.getElementById('cropModal');\n const imageElement = document.getElementById('image-to-crop');\n const rotateSlider = document.getElementById('rotate-slider');\n const rotateValDisplay = document.getElementById('rotate-val');\n\n \/\/ Setup Listeners\n document.getElementById('input-front').addEventListener('change', (e) => handleFile(e, 'front'));\n document.getElementById('input-back').addEventListener('change', (e) => handleFile(e, 'back'));\n\n function handleFile(e, side) {\n const file = e.target.files[0];\n if (file) {\n currentSide = side;\n const reader = new FileReader();\n reader.onload = (event) => {\n imageElement.src = event.target.result;\n openModal();\n \n if(cropper) cropper.destroy();\n \n cropper = new Cropper(imageElement, {\n viewMode: 2, \/\/ Restricts crop box to not exceed canvas\n autoCropArea: 0.95,\n responsive: true,\n background: false,\n ready() {\n rotateSlider.value = 0;\n rotateValDisplay.innerText = \"0\u00b0\";\n }\n });\n e.target.value = ''; \/\/ Reset input so same file can be selected again if needed\n };\n reader.readAsDataURL(file);\n }\n }\n\n \/\/ 90 Degree Rotation\n function rotate90(deg) {\n if(cropper) {\n cropper.rotate(deg);\n rotateSlider.value = 0;\n rotateValDisplay.innerText = \"0\u00b0\";\n }\n }\n\n \/\/ Fine Tuning Slider\n rotateSlider.addEventListener('input', function() {\n const val = parseFloat(this.value);\n rotateValDisplay.innerText = val + \"\u00b0\";\n if (cropper) {\n cropper.rotateTo(val);\n }\n });\n\n function openModal() { modal.style.display = 'flex'; }\n function closeModal() { \n modal.style.display = 'none'; \n if(cropper) cropper.destroy();\n }\n\n function finishCrop() {\n if (!cropper) return;\n\n \/\/ Extract high-quality crop\n const canvas = cropper.getCroppedCanvas({\n maxWidth: 1500,\n maxHeight: 1500,\n fillColor: '#fff' \/\/ fill transparent png backgrounds with white\n });\n\n const croppedDataUrl = canvas.toDataURL('image\/jpeg', 0.95);\n\n \/\/ Update UI\n const previewImg = document.getElementById(currentSide === 'front' ? 'view-front' : 'view-back');\n const contentDiv = document.getElementById(currentSide === 'front' ? 'content-front' : 'content-back');\n const boxDiv = document.getElementById(currentSide === 'front' ? 'box-front' : 'box-back');\n\n previewImg.src = croppedDataUrl;\n previewImg.style.display = 'block';\n contentDiv.style.display = 'none';\n boxDiv.classList.add('active');\n\n \/\/ Store internally for merging\n const imgObj = new Image();\n imgObj.src = croppedDataUrl;\n \n if (currentSide === 'front') frontImageObj = imgObj;\n else backImageObj = imgObj;\n\n closeModal();\n }\n\n function mergeImages() {\n if (!frontImageObj || !backImageObj) {\n alert(\"\u26a0\ufe0f Please upload and crop both Front and Back sides first.\");\n return;\n }\n\n const canvas = document.getElementById('finalCanvas');\n const ctx = canvas.getContext('2d');\n const placeholder = document.getElementById('placeholder');\n const dlBtn = document.getElementById('dl-btn');\n\n \/\/ Dimensions for an A4 print quality canvas\n const cardWidth = 1000;\n const cardHeight = 630;\n const gap = 60;\n const padding = 50;\n\n const totalWidth = (cardWidth * 2) + gap + (padding * 2);\n const totalHeight = cardHeight + (padding * 2);\n\n \/\/ Internal canvas resolution (High Quality)\n canvas.width = totalWidth;\n canvas.height = totalHeight;\n\n \/\/ White background\n ctx.fillStyle = \"#ffffff\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ Draw Images\n ctx.drawImage(frontImageObj, padding, padding, cardWidth, cardHeight);\n ctx.drawImage(backImageObj, padding + cardWidth + gap, padding, cardWidth, cardHeight);\n\n \/\/ Optional: Draw subtle border around cards\n ctx.strokeStyle = \"#cbd5e1\";\n ctx.lineWidth = 3;\n ctx.strokeRect(padding, padding, cardWidth, cardHeight);\n ctx.strokeRect(padding + cardWidth + gap, padding, cardWidth, cardHeight);\n\n \/\/ UI Updates\n placeholder.style.display = 'none';\n canvas.style.display = 'block';\n dlBtn.disabled = false;\n \n \/\/ Smooth scroll to result on mobile\n canvas.scrollIntoView({behavior: \"smooth\", block: \"center\"});\n }\n\n async function downloadCompressed() {\n const canvas = document.getElementById('finalCanvas');\n const targetKB = parseInt(document.getElementById('target-size').value) || 400;\n const dlBtn = document.getElementById('dl-btn');\n const infoDiv = document.getElementById('file-info');\n \n \/\/ Button state\n const originalText = dlBtn.innerHTML;\n dlBtn.innerHTML = \"Processing...\";\n dlBtn.disabled = true;\n\n const targetBytes = targetKB * 1024;\n let quality = 0.95;\n let blob = await getCanvasBlob(canvas, quality);\n\n \/\/ Auto-Compress logic\n let attempts = 0;\n while (blob.size > targetBytes && quality > 0.1 && attempts < 15) {\n quality -= 0.05;\n blob = await getCanvasBlob(canvas, quality);\n attempts++;\n }\n\n \/\/ Trigger Download\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = `Aadhaar_Merged_${targetKB}KB.jpg`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n\n \/\/ Reset Button state\n dlBtn.innerHTML = originalText;\n dlBtn.disabled = false;\n \n infoDiv.style.display = 'block';\n infoDiv.innerText = `\u2705 Success! File saved at ${(blob.size \/ 1024).toFixed(1)} KB`;\n }\n\n function getCanvasBlob(canvas, quality) {\n return new Promise(resolve => {\n canvas.toBlob(blob => { resolve(blob); }, 'image\/jpeg', quality);\n });\n }\n\n \/\/ Close modal if user clicks outside of it\n window.onclick = function(event) {\n if (event.target == modal) closeModal();\n }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Professional Aadhaar Joiner Tool Aadhaar Joiner Pro Upload, Auto-Crop, Rotate & Merge Seamlessly 100% Secure Local Processing 1. … <\/p>\n<p class=\"read-more-container\"><a title=\"Aadhaar Joiner Pro\" class=\"read-more button\" href=\"https:\/\/bkupdate.in\/?page_id=5035#more-5035\" aria-label=\"Read more about Aadhaar Joiner Pro\">Read more<\/a><\/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-5035","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages\/5035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bkupdate.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5035"}],"version-history":[{"count":2,"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages\/5035\/revisions"}],"predecessor-version":[{"id":5037,"href":"https:\/\/bkupdate.in\/index.php?rest_route=\/wp\/v2\/pages\/5035\/revisions\/5037"}],"wp:attachment":[{"href":"https:\/\/bkupdate.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}