{"id":1081,"date":"2026-05-05T10:40:32","date_gmt":"2026-05-05T10:40:32","guid":{"rendered":"https:\/\/janasevafoundations.org\/?page_id=1081"},"modified":"2026-05-05T10:40:32","modified_gmt":"2026-05-05T10:40:32","slug":"download-id","status":"publish","type":"page","link":"https:\/\/janasevafoundations.org\/?page_id=1081","title":{"rendered":"Download Id"},"content":{"rendered":"\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n    \n    <style>\n        \/* Container for the shell *\/\n        .sf-card-shell { \n            text-align: center; \n            font-family: 'Inter', sans-serif; \n            display: flex; \n            flex-direction: column; \n            align-items: center; \n            justify-content: center;\n            padding: 40px 20px;\n        }\n\n        \/* Center and style the search UI *\/\n        #ui-find {\n            width: 100%;\n            max-width: 450px; \/* Constraints the whole search area *\/\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .sf-h2 {\n            margin-bottom: 25px;\n            color: #1a1a1a;\n        }\n\n        .sf-input {\n            width: 100% !important;\n            max-width: 350px;\n            text-align: center;\n            margin-bottom: 20px;\n        }\n\n        \/* Balanced Button - Decreased width from both sides *\/\n        .sf-btn-centered {\n            width: 80% !important; \/* Makes it slightly smaller than the container *\/\n            max-width: 300px;\n            margin: 0 auto;\n            display: block;\n        }\n\n        \/* ID Card Preview Styles *\/\n        .sf-id-wrapper { padding: 30px; background: #f4f4f4; display: inline-block; border-radius: 20px; margin-top: 20px; }\n        .sf-portal-card { \n            display: flex; background: #fff; border-radius: 15px; \n            width: 550px; height: 300px; overflow: hidden; position: relative;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.1); text-align: left; border: 1px solid #ddd;\n        }\n        .sf-portal-sidebar { \n            width: 28%; background: #fff; border-left: 12px solid #1a5d1a; \n            display: flex; align-items: center; justify-content: center; padding: 10px; border-right: 1px solid #f0f0f0;\n        }\n        .sf-portal-sidebar img { width: 100%; height: auto; object-fit: contain; }\n        .sf-portal-main { width: 72%; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }\n        .sf-top-row { display: flex; justify-content: space-between; align-items: flex-start; }\n        .sf-foundation-name { font-size: 11px; font-weight: 900; color: #1a5d1a; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px; }\n        .sf-portal-name { font-weight: 800; font-size: 28px; color: #000; margin: 0 0 10px 0; text-transform: capitalize; }\n        .sf-portal-badge { background: #fbc02d; padding: 8px 18px; border-radius: 8px; font-size: 20px; font-weight: 900; display: inline-block; color: #333; font-family: 'Courier New', monospace; }\n        .sf-portal-photo-wrap { width: 100px; height: 120px; border-radius: 10px; border: 1px solid #ddd; overflow: hidden; background: #f9f9f9; margin-left: 15px; }\n        .sf-portal-photo { width: 100%; height: 100%; object-fit: cover; }\n        .sf-portal-address { font-size: 15px; color: #444; font-weight: 600; line-height: 1.3; }\n        .info-label { color: #1a5d1a; font-weight: 800; text-transform: uppercase; font-size: 10px; display: block; margin-bottom: 2px; }\n        .sf-portal-footer { font-size: 10px; color: #999; border-top: 1px solid #eee; padding-top: 10px; font-style: italic; }\n        .btn-group { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }\n    <\/style>\n\n    <div class=\"sf-card-shell\">\n        <div id=\"ui-find\">\n            <h2 class=\"sf-h2\">ID Portal<\/h2>\n            <input type=\"text\" id=\"fv\" class=\"sf-input\" placeholder=\"ID or Phone\">\n            <button onclick=\"sfFind()\" class=\"sf-btn sf-btn-centered\">Generate ID Card<\/button>\n        <\/div>\n\n        <div id=\"res-id\" style=\"display:none;\">\n            <div class=\"sf-id-wrapper\" id=\"download-area\">\n                <div class=\"sf-portal-card\">\n                    <div class=\"sf-portal-sidebar\">\n                        <img decoding=\"async\" src=\"https:\/\/srameshfoundation.org\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_d17pbwd17pbwd17p-e1777706233357.png\">\n                    <\/div>\n                    <div class=\"sf-portal-main\">\n                        <div class=\"sf-top-row\">\n                            <div class=\"sf-info-col\">\n                                <div class=\"sf-foundation-name\">Sramesh Foundation<\/div>\n                                <div id=\"c-name\" class=\"sf-portal-name\"><\/div>\n                                <div id=\"c-mid-box\" class=\"sf-portal-badge\"><\/div>\n                            <\/div>\n                            <div class=\"sf-portal-photo-wrap\">\n                                <img decoding=\"async\" id=\"c-photo\" class=\"sf-portal-photo\" src=\"\" crossorigin=\"anonymous\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"sf-address-section\">\n                            <span class=\"info-label\">Current Address<\/span>\n                            <div id=\"c-addr-box\" class=\"sf-portal-address\"><\/div>\n                        <\/div>\n                        <div class=\"sf-portal-footer\">\n                            Official Digital Identity \u2022 Sramesh Foundation\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"btn-group\">\n                <button class=\"sf-btn sf-btn-centered\" onclick=\"downloadID()\">Download ID Card<\/button>\n                <button class=\"sf-btn\" style=\"background:#666; width: auto;\" onclick=\"location.reload()\">Back<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        let memberID = \"\";\n        async function sfFind(){\n            const val = document.getElementById('fv').value;\n            if(!val) return alert('Please enter an ID or Phone');\n            \n            const fd = new FormData(); \n            fd.append('action','sf_process'); \n            fd.append('task','find'); \n            fd.append('val', val);\n            \n            const r = await fetch(sf_api,{method:'POST',body:fd}); \n            const j = await r.json();\n            \n            if(j.success){\n                document.getElementById('c-name').innerText = j.data.full_name;\n                document.getElementById('c-mid-box').innerText = j.data.member_id;\n                document.getElementById('c-addr-box').innerText = j.data.address;\n                document.getElementById('c-photo').src = j.data.photo_url || 'https:\/\/via.placeholder.com\/150';\n                memberID = j.data.member_id;\n                document.getElementById('ui-find').style.display='none'; \n                document.getElementById('res-id').style.display='block';\n            } else { \n                alert('Member not found'); \n            }\n        }\n\n        function downloadID() {\n            html2canvas(document.getElementById('download-area'), { useCORS: true, scale: 3 }).then(canvas => {\n                const link = document.createElement('a');\n                link.download = 'SF-ID-' + memberID + '.png';\n                link.href = canvas.toDataURL();\n                link.click();\n            });\n        }\n    <\/script>\n    \n\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-1081","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=\/wp\/v2\/pages\/1081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1081"}],"version-history":[{"count":0,"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=\/wp\/v2\/pages\/1081\/revisions"}],"wp:attachment":[{"href":"https:\/\/janasevafoundations.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}