{"id":3459,"date":"2026-03-12T12:40:30","date_gmt":"2026-03-12T08:40:30","guid":{"rendered":"https:\/\/oman-arc.com\/?page_id=3459"},"modified":"2026-03-14T17:13:51","modified_gmt":"2026-03-14T13:13:51","slug":"card-1","status":"publish","type":"page","link":"https:\/\/oman-arc.com\/ar\/card-1\/","title":{"rendered":"Card"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3459\" class=\"elementor elementor-3459\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c3e65d e-flex e-con-boxed e-con e-parent\" data-id=\"1c3e65d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6751212 elementor-widget elementor-widget-html\" data-id=\"6751212\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    .bottom-sec {\n    background: #4484ce;\n    padding: 65px 0;\n    color: #fff;\n    display: none;\n}\nheader{\n     display: none; \n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0222b17 elementor-widget elementor-widget-html\" data-id=\"0222b17\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Eid Card<\/title>\r\n\r\n  <!-- Optional font -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n  <!-- html2canvas for download -->\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\r\n\r\n\r\n\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    body {\r\n      margin: 0;\r\n      font-family: \"Alexandria\", sans-serif;\r\n      background: #ececec;\r\n      display:flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 100vh;\r\n      padding: 20px;\r\n    }\r\n\r\n    .phone-frame {\r\n      width: 440px;\r\n      max-width: 100%;\r\n      min-height: 844px;\r\n      background: #fff;\r\n      position: relative;\r\n      overflow: hidden;\r\n      box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .screen {\r\n      width: 100%;\r\n      min-height: 844px;\r\n      position: absolute;\r\n      inset: 0;\r\n      transition:opacity 0.35s ease, visibility 0.35s ease;\r\n    }\r\n\r\n    .hidden {\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* First screen *\/\r\n    .form-screen {\r\n      background:url(\"https:\/\/oman-arc.com\/wp-content\/uploads\/2026\/03\/Artboard-3.jpg\") center\/cover no-repeat;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      padding: 30px;\r\n    }\r\n\r\n    .name-box {\r\n      width: 100%;\r\n      max-width: 300px;\r\n      margin-bottom: 25px;\r\n    }\r\n\r\n    .name-input {\r\n      width: 100%;\r\n      height: 64px;\r\n      border-radius: 22px;\r\n      border: 3px solid #5ea2ff;\r\n      outline: none;\r\n      font-size: 18px;\r\n      font-weight: 600;\r\n      padding: 0 18px;\r\n      color: #fff;\r\n      background: rgba(0, 0, 0, 0.25);\r\n      box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset;\r\n    }\r\n\r\n    .name-input::placeholder {\r\n      color: rgba(255,255,255,0.85);\r\n            \r\n    }\r\n\r\n    .go-btn {\r\n      background: #293c51;\r\n      border: none;\r\n      color: #fff;\r\n      font-size: 22px;\r\n      font-weight: 700;\r\n      width: 76px;\r\n      height: 52px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n    }\r\n\r\n    .copyright {\r\n      position: absolute;\r\n      bottom: 36px;\r\n      color: rgba(255,255,255,0.7);\r\n      font-size: 12px;\r\n    }\r\n\r\n    \/* Second screen *\/\r\n    .card-screen {\r\n    \r\n      display:flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      padding-top: 18px;\r\n    }\r\n\r\n    .tools {\r\n      position: absolute;\r\n      top: 18px;\r\n      left: 18px;\r\n      z-index: 10;\r\n      display:flex;\r\n      gap: 12px;\r\n    }\r\n\r\n    .tool-btn {\r\n      width: 70px;\r\n      height: 70px;\r\n      border-radius: 50%;\r\n      border: none;\r\n      background: #293c51;\r\n      color: white;\r\n      font-size: 28px;\r\n      cursor: pointer;\r\n      font-weight: 700;\r\n      box-shadow: 0 6px 16px rgba(0,0,0,0.25);\r\n    }\r\n\r\n    .card-canvas {\r\n     width: 100%;\r\n    height: 858px;\r\n      background: url('https:\/\/oman-arc.com\/wp-content\/uploads\/2026\/03\/new3id-card-1-scaled.jpg') center\/cover no-repeat;\r\n      position: relative;\r\n      color: white;\r\n      overflow: hidden;\r\n    }\r\n\r\n  .card-content {\r\n      position: absolute;\r\n      inset: 0;\r\n      padding: 120px 28px 30px;\r\n      text-align:center;\r\n      \r\n      }\r\n      \r\n    .person-name {\r\n      font-size: 15px;\r\n      font-weight: 700px;\r\n      margin-top: 300px;\r\n      margin-bottom: 40px;\r\n \r\n    }\r\n\r\n    .calligraphy {\r\n      font-size: 64px;\r\n      font-weight: 700;\r\n      line-height: 1;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"phone-frame\">\r\n\r\n    <!-- Screen 1 -->\r\n    <section id=\"formScreen\" class=\"screen form-screen\">\r\n      <div class=\"name-box\">\r\n        <input id=\"nameInput\" class=\"name-input\" type=\"text\" placeholder=\"Enter Your Name\" \/>\r\n      <\/div>\r\n      <button id=\"goBtn\" class=\"go-btn\">Go<\/button>\r\n      <div class=\"copyright\">\u00a9 2026 OARC. All Rights Reserved.<\/div>\r\n    <\/section>\r\n\r\n    <!-- Screen 2 -->\r\n    <section id=\"cardScreen\" class=\"screen card-screen hidden\">\r\n      <div class=\"tools\">\r\n        <button id=\"resetBtn\" class=\"tool-btn\" title=\"Back\">\u21ba<\/button>\r\n        <button id=\"downloadBtn\" class=\"tool-btn\" title=\"Download\">\u2b07<\/button>\r\n      <\/div>\r\n\r\n      <div id=\"cardCanvas\" class=\"card-canvas\">\r\n        <div class=\"card-content\">\r\n         \r\n   \r\n          <div id=\"displayName\" class=\"person-name\">Your Name<\/div>\r\n        <\/div>\r\n         <\/div>\r\n\r\n    <\/section>\r\n\r\n  <\/div>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n\r\n  <script>\r\n    const formScreen = document.getElementById(\"formScreen\");\r\n    const cardScreen = document.getElementById(\"cardScreen\");\r\n    const nameInput = document.getElementById(\"nameInput\");\r\n    const displayName = document.getElementById(\"displayName\");\r\n    const goBtn = document.getElementById(\"goBtn\");\r\n    const resetBtn = document.getElementById(\"resetBtn\");\r\n    const downloadBtn = document.getElementById(\"downloadBtn\");\r\n   \r\n\r\n    let qrInstance = null;\r\n\r\n    function showCard() {\r\n      const name = nameInput.value.trim();\r\n\r\n      if (!name) {\r\n        alert(\"Please enter your name.\");\r\n        return;\r\n      }\r\n\r\n      displayName.textContent = name;\r\n      formScreen.classList.add(\"hidden\");\r\n      cardScreen.classList.remove(\"hidden\");\r\n\r\n   \r\n    }\r\n\r\n    function resetForm() {\r\n      cardScreen.classList.add(\"hidden\");\r\n      formScreen.classList.remove(\"hidden\");\r\n      nameInput.focus();\r\n    }\r\nasync function downloadCard() {\r\n  const card = document.getElementById(\"cardCanvas\");\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 300));\r\n\r\n  const canvas = await html2canvas(card, {\r\n    scale: window.devicePixelRatio * 3, \/\/ better resolution\r\n    useCORS: true,\r\n    backgroundColor: null,\r\n    allowTaint: true\r\n  });\r\n\r\n  const imgData = canvas.toDataURL(\"image\/png\", 1.0);\r\n\r\n  const link = document.createElement(\"a\");\r\n  link.href = imgData;\r\n  link.download = \"card.png\";\r\n\r\n  document.body.appendChild(link);\r\n  link.click();\r\n  document.body.removeChild(link);\r\n}\r\n\r\n    goBtn.addEventListener(\"click\", showCard);\r\n    resetBtn.addEventListener(\"click\", resetForm);\r\n    downloadBtn.addEventListener(\"click\", downloadCard);\r\n\r\n    nameInput.addEventListener(\"keydown\", function (e) {\r\n      if (e.key === \"Enter\") {\r\n        showCard();\r\n      }\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Eid Card Go \u00a9 2026 OARC. All Rights Reserved. \u21ba \u2b07 Your Name<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"saved_in_kubio":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3459","page","type-page","status-publish","hentry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"ar","enabled_languages":["en","ar"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ar":{"title":false,"content":false,"excerpt":false}}},"acf":[],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/pages\/3459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/comments?post=3459"}],"version-history":[{"count":0,"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/pages\/3459\/revisions"}],"wp:attachment":[{"href":"https:\/\/oman-arc.com\/ar\/wp-json\/wp\/v2\/media?parent=3459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}