{"id":24099,"date":"2026-01-05T16:58:19","date_gmt":"2026-01-05T12:58:19","guid":{"rendered":"https:\/\/onplan.ae\/?page_id=24099"},"modified":"2026-02-16T14:22:57","modified_gmt":"2026-02-16T10:22:57","slug":"onplan-group","status":"publish","type":"page","link":"https:\/\/onplan.ae\/ar\/onplan-group\/","title":{"rendered":"ONPLAN GROUP"},"content":{"rendered":"<!-- =========================\n     SINGLE-PAGE COMPANY SWITCHER (UPDATED)\n     \u2705 On load: show ONLY 4 company logos\n     \u2705 On logo click: hide logos, show Back button + details\n     \u2705 Social icons: proper spacing, no overlap\n========================= -->\n\n<style>\n  body, html {\n    margin: 0;\n    padding: 0;\n    font-family: 'Inter', sans-serif;\n    background: #f5f5f5;\n    text-align: center;\n    height: 100%;\n  }\n\n  .center-wrapper {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .tree-container {\n    max-width: 480px;\n    margin: 30px auto;\n    padding: 20px;\n    width: 100%;\n  }\n\n  \/* Company selector (4 logos) *\/\n  .company-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    margin-bottom: 10px;\n  }\n\n  .company-btn {\n    appearance: none;\n    border: 2px solid transparent;\n    background: #fff;\n    border-radius: 14px;\n    padding: 14px 10px;\n    cursor: pointer;\n    transition: 0.18s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 78px;\n    box-shadow: 0 6px 18px rgba(0,0,0,0.06);\n  }\n\n  .company-btn:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 10px 24px rgba(0,0,0,0.10);\n  }\n\n  .company-btn img {\n    max-width: 170px;\n    max-height: 44px;\n    width: auto;\n    height: auto;\n  }\n\n  .company-fallback {\n    font-weight: 700;\n    color: #111;\n    font-size: 14px;\n    padding: 6px 8px;\n  }\n\n  \/* Intro text before selection *\/\n  .intro {\n    margin: 12px 0 0;\n    color: #333;\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  \/* Back button (hidden until selection) *\/\n  .back-btn {\n    display: none;\n    width: 100%;\n    padding: 14px;\n    margin: 0 0 14px 0;\n    background: #ffffff;\n    color: #0A85FF;\n    text-decoration: none;\n    font-size: 16px;\n    border-radius: 12px;\n    font-weight: 700;\n    border: 2px solid #0A85FF;\n    cursor: pointer;\n    transition: 0.2s ease;\n  }\n\n  .back-btn:hover {\n    transform: scale(1.02);\n    background: #f0f7ff;\n  }\n\n  \/* Details area (hidden until selection) *\/\n  .details {\n    display: none;\n    margin-top: 6px;\n  }\n  .details.show {\n    display: block;\n  }\n\n  .welcome {\n    font-size: 20px;\n    font-weight: 600;\n    margin: 14px 0 20px;\n    color: #333;\n  }\n\n  .tree-btn {\n    display: block;\n    width: 100%;\n    padding: 16px;\n    margin: 12px 0;\n    background: #0A85FF;\n    color: white;\n    text-decoration: none;\n    font-size: 17px;\n    border-radius: 12px;\n    font-weight: 600;\n    transition: 0.2s ease;\n  }\n\n  .tree-btn:hover {\n    background: #006fe6;\n    transform: scale(1.03);\n  }\n\n  .tree-btn img.icon-img {\n    width: 22px;\n    vertical-align: middle;\n    margin-right: 10px;\n  }\n\n  \/* \u2705 Social icons spacing fix (no overlap) *\/\n  .social-icons {\n    margin-top: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 14px;          \/* space between icons *\/\n    flex-wrap: wrap;    \/* wrap on small screens *\/\n  }\n\n  .social-icons a {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .social-icons a img {\n    width: 42px;\n    height: 42px;\n    object-fit: contain;\n    transition: 0.2s;\n    display: block;\n  }\n\n  .social-icons a img:hover {\n    transform: scale(1.15);\n  }\n<\/style>\n\n<div class=\"center-wrapper\">\n  <div class=\"tree-container\">\n\n    <!-- 4 COMPANY LOGOS (shown on page load) -->\n    <div class=\"company-grid\" id=\"companyGrid\"><\/div>\n\n    <!-- Small instruction (always visible initially) -->\n    <div class=\"intro\" id=\"introText\">Please select a company to continue<\/div>\n\n    <!-- Back button (shows after selection) -->\n    <button class=\"back-btn\" id=\"backBtn\" type=\"button\">\u2190 Back<\/button>\n\n    <!-- Hidden until a company is selected -->\n    <div class=\"details\" id=\"details\">\n      <div class=\"welcome\" id=\"welcomeText\"><\/div>\n      <div id=\"buttonsArea\"><\/div>\n      <div class=\"social-icons\" id=\"socialArea\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ =========================\n  \/\/ EDIT ONLY THIS DATA AREA\n  \/\/ =========================\n  const COMPANIES = [\n    {\n      key: \"onplan\",\n      name: \"Onplan Real Estate\",\n      logoUrl: \"https:\/\/onplan.ae\/wp-content\/uploads\/2025\/01\/onplan-new-logo-black.svg\",\n      welcomeHtml: `Welcome to Onplan Real Estate!<br>Choose an option below:`,\n      buttons: [\n        { text: \"\u2b50 Leave Us a Google Review\", href: \"https:\/\/maps.app.goo.gl\/hTrynaQrDWvBgUsJA\", target: \"_blank\" },\n        { text: \"\ud83c\udf10 Visit Our Website\", href: \"https:\/\/www.onplan.ae\", target: \"_blank\" },\n        {\n          html: `<img decoding=\"async\" class=\"icon-img\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/733\/733585.png\" alt=\"WhatsApp\">Chat with Us on WhatsApp`,\n          href: \"https:\/\/wa.me\/971559799397\",\n          target: \"_blank\"\n        },\n        { text: \"\ud83d\udcde Call Us\", href: \"tel:+97147181000\" },\n        { text: \"\ud83d\udcf8 Follow Us on Instagram\", href: \"https:\/\/www.instagram.com\/onplanuae\", target: \"_blank\" },\n        { text: \"\ud83d\udc4d Like Us on Facebook\", href: \"https:\/\/www.facebook.com\/share\/1DVk3pWNJA\/?mibextid=wwXIfr\", target: \"_blank\" },\n        { text: \"\ud83d\udcbc Connect on LinkedIn\", href: \"https:\/\/www.linkedin.com\/company\/onplan-realestate\", target: \"_blank\" },\n      ],\n      socials: [\n        { href: \"https:\/\/www.instagram.com\/onplanuae\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/2111\/2111463.png\", alt: \"Instagram\" },\n        { href: \"https:\/\/www.facebook.com\/share\/1DVk3pWNJA\/?mibextid=wwXIfr\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/733\/733547.png\", alt: \"Facebook\" },\n        { href: \"https:\/\/www.linkedin.com\/company\/onplan-realestate\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/3536\/3536505.png\", alt: \"LinkedIn\" },\n        { href: \"https:\/\/wa.me\/971559799397\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/733\/733585.png\", alt: \"WhatsApp\" },\n        { href: \"tel:+97147181000\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/597\/597177.png\", alt: \"Call\" },\n      ]\n    },\n\n    \/\/ Replace logoUrl + links for these 3 companies:\n    {\n      key: \"authentic\",\n      name: \"Authentic Holiday Homes\",\n      logoUrl: \"https:\/\/onplan.ae\/wp-content\/uploads\/2026\/02\/AHH-logo-png.png\", \/\/ put your logo URL\n      welcomeHtml: `Welcome to Authentic Holiday Homes!<br>Choose an option below:`,\n      buttons: [\n        { text: \"\u2b50 Leave Us a Google Review\", href: \"https:\/\/g.page\/r\/CUQi72TuttH6EBM\/review\", target: \"_blank\" },\n        { text: \"\ud83c\udf10 Visit Our Website\", href: \"https:\/\/www.authenticholidayhomes.ae\", target: \"_blank\" },\n        { text: \"\ud83d\udcac WhatsApp\", href: \"https:\/\/wa.me\/971559799397\", target: \"_blank\" },\n        { text: \"\ud83d\udcde Call Us\", href: \"tel:+97147181000\" }\n      ],\n      socials: [\n        { href: \"https:\/\/instagram.com\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/2111\/2111463.png\", alt: \"Instagram\" },\n        { href: \"https:\/\/wa.me\/971000000000\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/733\/733585.png\", alt: \"WhatsApp\" }\n      ]\n    },\n\n    {\n      key: \"touchup\",\n      name: \"Touchup\",\n      logoUrl: \"https:\/\/onplan.ae\/wp-content\/uploads\/2026\/02\/Touch-up-logo-black-en.webp\", \/\/ put your logo URL\n      welcomeHtml: `Welcome to Touchup!<br>Choose an option below:`,\n      buttons: [\n        { text: \"\ud83c\udf10 Visit Our Website\", href: \"https:\/\/www.touchup.ae\", target: \"_blank\" },\n        { text: \"\ud83d\udcde Call Us\", href: \"tel:+971000000000\" }\n      ],\n      socials: [\n        { href: \"https:\/\/instagram.com\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/2111\/2111463.png\", alt: \"Instagram\" }\n      ]\n    },\n\n    {\n      key: \"snagx\",\n      name: \"Snagx\",\n      logoUrl: \"https:\/\/onplan.ae\/wp-content\/uploads\/2026\/02\/snag-x-logo-no-bg.png\", \/\/ put your logo URL\n      welcomeHtml: `Welcome to Snagx!<br>Choose an option below:`,\n      buttons: [\n        { text: \"\ud83c\udf10 Visit Our Website\", href: \"https:\/\/www.snagx.ae\", target: \"_blank\" },\n        { text: \"\ud83d\udcde Call Us\", href: \"tel:+971000000000\" }\n      ],\n      socials: [\n        { href: \"https:\/\/linkedin.com\", icon: \"https:\/\/cdn-icons-png.flaticon.com\/512\/3536\/3536505.png\", alt: \"LinkedIn\" }\n      ]\n    },\n  ];\n\n  \/\/ =========================\n  \/\/ LOGIC\n  \/\/ =========================\n  const companyGrid = document.getElementById(\"companyGrid\");\n  const introText   = document.getElementById(\"introText\");\n  const details     = document.getElementById(\"details\");\n  const welcomeText = document.getElementById(\"welcomeText\");\n  const buttonsArea = document.getElementById(\"buttonsArea\");\n  const socialArea  = document.getElementById(\"socialArea\");\n  const backBtn     = document.getElementById(\"backBtn\");\n\n  function showHome() {\n    \/\/ show logos, hide details\n    companyGrid.style.display = \"grid\";\n    introText.style.display = \"block\";\n    backBtn.style.display = \"none\";\n    details.classList.remove(\"show\");\n\n    \/\/ remove active states (optional)\n    [...companyGrid.querySelectorAll(\".company-btn\")].forEach(btn => {\n      btn.classList.remove(\"active\");\n    });\n\n    \/\/ clear details (optional)\n    welcomeText.innerHTML = \"\";\n    buttonsArea.innerHTML = \"\";\n    socialArea.innerHTML = \"\";\n  }\n\n  function renderCompany(companyKey) {\n    const company = COMPANIES.find(c => c.key === companyKey);\n    if (!company) return;\n\n    \/\/ \u2705 hide logos, show back + details\n    companyGrid.style.display = \"none\";\n    introText.style.display = \"none\";\n    backBtn.style.display = \"block\";\n    details.classList.add(\"show\");\n\n    \/\/ welcome\n    welcomeText.innerHTML = company.welcomeHtml;\n\n    \/\/ buttons\n    buttonsArea.innerHTML = \"\";\n    company.buttons.forEach(b => {\n      const a = document.createElement(\"a\");\n      a.className = \"tree-btn\";\n      a.href = b.href;\n      if (b.target) a.target = b.target;\n\n      if (b.html) a.innerHTML = b.html;\n      else a.textContent = b.text;\n\n      buttonsArea.appendChild(a);\n    });\n\n    \/\/ socials\n    socialArea.innerHTML = \"\";\n    company.socials.forEach(s => {\n      const a = document.createElement(\"a\");\n      a.href = s.href;\n      if (s.href.startsWith(\"http\")) a.target = \"_blank\";\n\n      const img = document.createElement(\"img\");\n      img.src = s.icon;\n      img.alt = s.alt || \"social\";\n\n      a.appendChild(img);\n      socialArea.appendChild(a);\n    });\n\n    \/\/ optional nice UX on mobile\n    \/\/ details.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n  }\n\n  function buildCompanySelector() {\n    companyGrid.innerHTML = \"\";\n\n    COMPANIES.forEach(c => {\n      const btn = document.createElement(\"button\");\n      btn.type = \"button\";\n      btn.className = \"company-btn\";\n      btn.dataset.key = c.key;\n\n      if (c.logoUrl) {\n        const img = document.createElement(\"img\");\n        img.src = c.logoUrl;\n        img.alt = c.name;\n        btn.appendChild(img);\n      } else {\n        const fallback = document.createElement(\"div\");\n        fallback.className = \"company-fallback\";\n        fallback.textContent = c.name;\n        btn.appendChild(fallback);\n      }\n\n      btn.addEventListener(\"click\", () => renderCompany(c.key));\n      companyGrid.appendChild(btn);\n    });\n  }\n\n  backBtn.addEventListener(\"click\", showHome);\n\n  \/\/ Init: show ONLY logos\n  buildCompanySelector();\n  showHome();\n<\/script>\n\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Please select a company to continue \u2190 Back<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-24099","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/pages\/24099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/comments?post=24099"}],"version-history":[{"count":26,"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/pages\/24099\/revisions"}],"predecessor-version":[{"id":24431,"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/pages\/24099\/revisions\/24431"}],"wp:attachment":[{"href":"https:\/\/onplan.ae\/ar\/wp-json\/wp\/v2\/media?parent=24099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}