{"id":10,"date":"2025-01-09T10:31:46","date_gmt":"2025-01-09T10:31:46","guid":{"rendered":"https:\/\/outmazed.com\/business-card\/?page_id=10"},"modified":"2026-02-13T08:27:20","modified_gmt":"2026-02-13T08:27:20","slug":"aftab","status":"publish","type":"page","link":"https:\/\/outmazed.com\/business-card\/aftab\/","title":{"rendered":""},"content":{"rendered":"\n

Aftab N. | Founder & Group CEO | OutMazed\u00ae<\/h3>\n\n\n\n\n\n\n \n \n \n \n Business Card Flipbook<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.14.305\/pdf.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.14.305\/pdf.worker.min.js\"><\/script>\n <audio id=\"flipSound\" src=\"https:\/\/www.soundjay.com\/paper\/sounds\/page-flip-01a.mp3\" preload=\"auto\"><\/audio>\n\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600&display=swap');\n\n body {\n font-family: 'Poppins', sans-serif;\n background: #f9f9f9;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n }\n\n .flipbook-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .flipbook-container {\n position: relative;\n width: 600px;\n height: 350px;\n background: white;\n overflow: hidden;\n box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n border: 6px solid #666;\n }\n\n .preloader {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n z-index: 10;\n }\n\n .preloader.hidden {\n display: none;\n }\n\n .loader {\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top: 3px solid white;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n margin-bottom: 8px;\n }\n\n .preloader-text {\n color: white;\n font-size: 12px;\n font-weight: 600;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.9);\n border: none;\n font-size: 16px;\n cursor: pointer;\n padding: 8px;\n border-radius: 50%;\n box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);\n transition: all 0.3s ease;\n color: #333;\n z-index: 5;\n }\n\n .arrow:hover {\n background: #0073e6;\n transform: scale(1.2);\n color: white;\n }\n\n .arrow-left {\n left: 10px;\n }\n\n .arrow-right {\n right: 10px;\n }\n\n .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #666;\n padding: 6px 14px;\n border-radius: 8px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.25);\n margin-top: 8px;\n gap: 6px;\n }\n\n .toolbar button {\n background: rgba(255, 255, 255, 0.1);\n border: none;\n font-size: 12px;\n cursor: pointer;\n padding: 6px;\n color: white;\n border-radius: 8px;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n }\n\n .toolbar button:hover {\n background: #0073e6;\n transform: scale(1.1);\n }\n\n canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"flipbook-wrapper\">\n <div class=\"flipbook-container\">\n <div class=\"preloader\" id=\"preloader\">\n <div class=\"loader\"><\/div>\n <div class=\"preloader-text\">Loading Aftab E Card…<\/div>\n <\/div>\n <button class=\"arrow arrow-left\" onclick=\"prevPage()\">◁<\/button>\n <canvas id=\"pdf-render\"><\/canvas>\n <button class=\"arrow arrow-right\" onclick=\"nextPage()\">▷<\/button>\n <\/div>\n\n <div class=\"toolbar\">\n <button onclick=\"prevPage()\">◁<\/button>\n <button onclick=\"downloadPDF()\">⇩<\/button>\n <button onclick=\"zoomIn()\">+<\/button>\n <button onclick=\"zoomOut()\">−<\/button>\n <button onclick=\"fullscreen()\">⛶<\/button>\n <button onclick=\"nextPage()\">▷<\/button>\n <\/div>\n <\/div>\n\n <script>\n const pdfUrl = \"https:\/\/outmazed.com\/business-card\/wp-content\/uploads\/2026\/02\/Aftab-N.-Business-Card-WON.pdf\";\n let pdfDoc = null,\n pageNum = 1,\n canvas = document.getElementById(\"pdf-render\"),\n ctx = canvas.getContext(\"2d\");\n\n pdfjsLib.GlobalWorkerOptions.workerSrc = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.14.305\/pdf.worker.min.js\";\n\n function loadPDF() {\n pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {\n pdfDoc = pdf;\n renderPage(pageNum);\n }).catch(error => {\n console.error(\"Error loading PDF:\", error);\n document.getElementById(\"preloader\").innerHTML = \"<p style='color: white; font-size: 12px;'>Failed to load PDF<\/p>\";\n });\n }\n\n function renderPage(num) {\n pdfDoc.getPage(num).then(page => {\n const container = document.querySelector(\".flipbook-container\");\n const viewport = page.getViewport({ scale: 1 });\n\n \/\/ Adjust scaling to fit container\n const scaleX = container.clientWidth \/ viewport.width;\n const scaleY = container.clientHeight \/ viewport.height;\n const finalScale = Math.min(scaleX, scaleY);\n const finalViewport = page.getViewport({ scale: finalScale });\n\n canvas.width = finalViewport.width;\n canvas.height = finalViewport.height;\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n page.render({ canvasContext: ctx, viewport: finalViewport }).promise.then(() => {\n document.getElementById(\"preloader\").classList.add(\"hidden\");\n });\n });\n }\n\n function prevPage() { if (pageNum > 1) { pageNum--; renderPage(pageNum); } }\n function nextPage() { if (pageNum < pdfDoc.numPages) { pageNum++; renderPage(pageNum); } }\n\n function downloadPDF() { window.open(pdfUrl, \"_blank\"); }\n function fullscreen() { document.documentElement.requestFullscreen(); }\n\n window.onload = loadPDF;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div id=\"contact-buttons\" style=\"text-align:center\"><\/div>\n\n<script>\n \/\/ Function to create a vCard URL from a contact object\n function createVCard(contact) {\n const vCardData = [\n \"BEGIN:VCARD\",\n \"VERSION:3.0\",\n `N:${contact.lastName || ''};${contact.firstName || ''}`,\n `FN:${contact.firstName || ''} ${contact.lastName || ''}`,\n `TITLE:${contact.title || ''}`,\n `ORG:${contact.organization || ''}`,\n `ADR:;;${contact.officeAddress || ''}`,\n ...(contact.phones ? contact.phones.map(p => `TEL;TYPE=${p.type.toUpperCase()}:${p.number}`) : []),\n ...(contact.email ? [`EMAIL;TYPE=WORK:${contact.email}`] : []),\n ...(contact.url ? [`URL:${contact.url}`] : []),\n \"END:VCARD\"\n ].join(\"\\n\");\n\n return \"data:text\/vcard;charset=utf-8,\" + encodeURIComponent(vCardData);\n }\n\n \/\/ Function to create a save contact button dynamically\n function createSaveContactButton(contact) {\n const a = document.createElement(\"a\");\n a.href = createVCard(contact);\n a.download = `${contact.firstName}_${contact.lastName}.vcf`;\n a.innerText = \"Save Contact\";\n\n \/\/ Inline styles (mobile-friendly)\n a.style.display = \"inline-block\";\n a.style.padding = \"12px 20px\";\n a.style.backgroundColor = \"rgb(58 68 79)\";\n a.style.color = \"#fff\";\n a.style.borderRadius = \"8px\";\n a.style.textDecoration = \"none\";\n a.style.fontSize = \"16px\";\n a.style.margin = \"10px 0\";\n\n return a;\n }\n\n \/\/ Example contact\n const contact = {\n firstName: \"Aftab\",\n lastName: \"N.\",\n title: \"Founder & Group CEO\",\n organization: \"OutMazed\u00ae LLC\",\n officeAddress: \"Office # 2212, 2012, 22nd & 20th Floor, SIT Tower, Dubai Silicon Oasis, Dubai, United Arab Emirates\",\n phones: [\n { type: \"work,voice\", number: \"+97143363259\" },\n ],\n email: \"aftab@outmazed.com\",\n url: \"www.outmazed.com\"\n };\n\n \/\/ Append button to the div\n document.getElementById(\"contact-buttons\").appendChild(createSaveContactButton(contact));\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Aftab N. | Founder & Group CEO | OutMazed\u00ae Business Card Flipbook Loading Aftab E Card… ◁ ▷ ◁ ⇩ + − ⛶ ▷<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":14,"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/pages\/10\/revisions\/66"}],"wp:attachment":[{"href":"https:\/\/outmazed.com\/business-card\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}