{"id":324,"date":"2026-02-09T17:17:44","date_gmt":"2026-02-09T09:17:44","guid":{"rendered":"https:\/\/www.ukm.my\/imenhub\/?page_id=324"},"modified":"2026-02-09T17:32:18","modified_gmt":"2026-02-09T09:32:18","slug":"qr-cod-generator","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/imenhub\/qr-cod-generator\/","title":{"rendered":"QR Code"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"324\" class=\"elementor elementor-324\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74ff763 e-flex e-con-boxed e-con e-parent\" data-id=\"74ff763\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec62f29 elementor-widget elementor-widget-html\" data-id=\"ec62f29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ushelp\/EasyQRCodeJS@master\/dist\/easy.qrcode.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n    <style>\n        \/* Scoped styles to prevent conflict with WordPress Elementor theme *\/\n        .imen-studio-wrapper {\n            --slate-blue-glass: rgba(142, 157, 190, 0.98); \n            --ios-blue: #007AFF;\n            --word-bg: #f9f9f9;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 20px 0;\n            width: 100%;\n            margin: 0 auto;\n        }\n\n        .imen-glass-shell {\n            background: #ffffff;\n            border-radius: 30px;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n            padding: 25px;\n            width: 100%;\n            max-width: 400px; \n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            box-sizing: border-box;\n        }\n\n        .imen-studio-wrapper input, \n        .imen-studio-wrapper textarea { \n            width: 100%; \n            padding: 12px; \n            margin-bottom: 15px; \n            border: 1px solid #ddd; \n            border-radius: 10px; \n            color: #333; \n            font-size: 14px; \n            box-sizing: border-box; \n            outline: none;\n            background: #fff;\n        }\n\n        \/* DOWNLOAD PREVIEW CONTAINER *\/\n        #imen-export-wrapper {\n            padding: 30px; \n            background: var(--word-bg); \n            display: inline-block;\n            border-radius: 20px;\n            margin-bottom: 20px;\n        }\n\n        \/* THE ASSET TAG DESIGN *\/\n        #imen-capture-area { \n            background: #ffffff;\n            width: 300px; \n            border-radius: 35px; \n            overflow: hidden;\n            display: flex; \n            flex-direction: column; \n            align-items: center;\n            box-shadow: 0 15px 45px rgba(0,0,0,0.2); \n            position: relative;\n        }\n\n        .imen-header-banner {\n            background: var(--slate-blue-glass);\n            width: 100%; \n            padding: 22px 0;\n            display: flex; \n            justify-content: center;\n            position: relative; \n            overflow: hidden;\n            z-index: 2;\n            box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 3px 8px rgba(0,0,0,0.1); \n            border-bottom: 1px solid rgba(0,0,0,0.1);\n        }\n\n        \/* Static Glass Reflection *\/\n        .imen-header-banner::before {\n            content: \"\";\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);\n            pointer-events: none; z-index: 4;\n        }\n\n        .imen-header-banner img { \n            height: 70px; \n            position: relative; \n            z-index: 5; \n            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15)); \n        }\n\n        #imen-qrcode { margin-top: 30px; margin-bottom: 10px; position: relative; z-index: 1; }\n\n        #imen-text-label { \n            font-weight: 800; \n            font-size: 22px; \n            color: #1c1c1e; \n            text-align: center; \n            white-space: pre-wrap; \n            line-height: 1.2;\n            padding: 0 15px 35px 15px; \n            position: relative; \n            z-index: 1;\n        }\n\n        .imen-btn-download { \n            width: 100%; \n            padding: 15px; \n            border: none; \n            border-radius: 12px; \n            background: var(--ios-blue); \n            color: white; \n            font-weight: 700; \n            cursor: pointer; \n            font-size: 15px;\n            transition: all 0.3s ease;\n        }\n        .imen-btn-download:hover { opacity: 0.9; transform: translateY(-1px); }\n        .imen-btn-download:active { transform: scale(0.98); }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"imen-studio-wrapper\">\n        <div class=\"imen-glass-shell\">\n            <input type=\"text\" id=\"imenUrlInput\" value=\"www.google.com\">\n            <textarea id=\"imenLabelInput\" oninput=\"updateImenPreview()\">Place your text here<\/textarea>\n\n            <div id=\"imen-export-wrapper\">\n                <div id=\"imen-capture-area\">\n                    <div class=\"imen-header-banner\">\n                        <img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/imenhub-portal\/imenhub-portal.github.io\/main\/i-nstrumen\/logoimen.png\" crossorigin=\"anonymous\">\n                    <\/div>\n                    <div id=\"imen-qrcode\"><\/div>\n                    <div id=\"imen-text-label\">Place your text here<\/div>\n                <\/div>\n            <\/div>\n\n            <button class=\"imen-btn-download\" onclick=\"exportImenQR()\">Download<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        var imenQr;\n\n        function renderImenQR() {\n            let url = document.getElementById(\"imenUrlInput\").value;\n            \/\/ Ensure URL starts with http if not present for scannability, \n            \/\/ but keep the display clean if it's just a text string.\n            if (url.includes('.') && !url.startsWith('http')) {\n                url = 'https:\/\/' + url;\n            }\n\n            const container = document.getElementById(\"imen-qrcode\");\n            container.innerHTML = \"\"; \n\n            imenQr = new QRCode(container, {\n                text: url,\n                width: 600, \n                height: 600,\n                colorDark: \"#000000\",\n                colorLight: \"#ffffff\",\n                correctLevel: QRCode.CorrectLevel.H,\n                quietZone: 20\n            });\n\n            const qrImg = container.querySelector('img, canvas');\n            if(qrImg) {\n                qrImg.style.width = \"220px\";\n                qrImg.style.height = \"220px\";\n            }\n        }\n\n        function updateImenPreview() {\n            document.getElementById(\"imen-text-label\").innerText = document.getElementById(\"imenLabelInput\").value;\n            renderImenQR();\n        }\n\n        function exportImenQR() {\n            const area = document.getElementById('imen-export-wrapper');\n            const labelText = document.getElementById('imenLabelInput').value.split('\\n')[0] || 'Tag';\n            \n            html2canvas(area, { \n                scale: 3, \n                useCORS: true, \n                backgroundColor: \"#f9f9f9\",\n                logging: false\n            }).then(canvas => {\n                const link = document.createElement('a');\n                link.download = `IMEN_${labelText}.png`;\n                link.href = canvas.toDataURL(\"image\/png\", 1.0);\n                link.click();\n            });\n        }\n\n        \/\/ Delay to ensure Elementor and all assets are loaded\n        window.addEventListener('load', function() {\n            renderImenQR();\n        });\n    <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Place your text here Place your text here Download<\/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-324","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/pages\/324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/comments?post=324"}],"version-history":[{"count":36,"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/pages\/324\/revisions"}],"predecessor-version":[{"id":366,"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/pages\/324\/revisions\/366"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/imenhub\/wp-json\/wp\/v2\/media?parent=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}