{"id":964,"date":"2026-03-10T14:25:13","date_gmt":"2026-03-10T14:25:13","guid":{"rendered":"https:\/\/wafarlii.com\/install-app\/"},"modified":"2026-03-10T17:22:59","modified_gmt":"2026-03-10T17:22:59","slug":"install-app","status":"publish","type":"page","link":"https:\/\/wafarlii.com\/en\/install-app\/","title":{"rendered":"Install App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"964\" class=\"elementor elementor-964 elementor-926\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-07150e1 e-con-full e-flex e-con e-parent\" data-id=\"07150e1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-039ac40 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"039ac40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0635\u0641\u062d\u0629 \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642 - \u0643\u0648\u062f \u0645\u0648\u062d\u062f \u0630\u0643\u064a -->\r\n<div id=\"waffarlii-app-wrapper\" style=\"width: 100%; background-color: #f4f4f4; padding: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-sizing: border-box; margin: 0 auto;\">\r\n    \r\n    <!-- \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a -->\r\n    <div style=\"text-align: center; margin-bottom: 25px; padding: 10px 0;\">\r\n        <h1 id=\"main-title\" style=\"color: #e67e22; font-size: 24px; margin: 0 0 8px 0; font-weight: 800; line-height: 1.3;\"><\/h1>\r\n        <p id=\"main-subtitle\" style=\"font-size: 15px; color: #666; margin: 0; line-height: 1.5;\"><\/p>\r\n    <\/div>\r\n\r\n    <!-- \u0642\u0633\u0645 \u0623\u0646\u062f\u0631\u0648\u064a\u062f -->\r\n    <div style=\"background: #ffffff; padding: 20px; border-radius: 16px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.03);\">\r\n        <div style=\"display: flex; align-items: center; justify-content: center; margin-bottom: 12px;\">\r\n            <svg id=\"android-icon\" style=\"width: 24px; height: 24px; flex-shrink: 0;\" viewBox=\"0 0 24 24\" fill=\"#27ae60\">\r\n                <path d=\"M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-1.44-.59-3.02-.59-4.46 0L10.13 5.67c-.19-.29-.54-.38-.84-.23-.31.16-.43.54-.27.84L10.86 9.48C7.46 11.16 5.28 14.5 5 18.5h14c-.28-4-2.46-7.34-5.86-9.02zM7.5 16c-.83 0-1.5-.67-1.5-1.5S6.67 13 7.5 13s1.5.67 1.5 1.5S8.33 16 7.5 16zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\"\/>\r\n            <\/svg>\r\n            <h3 id=\"android-title\" style=\"color: #27ae60; margin: 0; font-size: 17px;\"><\/h3>\r\n        <\/div>\r\n        <p id=\"android-desc\" style=\"font-size: 15px; line-height: 1.6; text-align: center; color: #555; margin-bottom: 12px;\"><\/p>\r\n        <div style=\"background: #f9f9f9; padding: 12px; border-radius: 8px; border: 1px dashed #ccc; font-size: 13px; text-align: center; color: #666;\">\r\n            <span id=\"android-tip\"><\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0632\u0631 \u0627\u0644\u062a\u062b\u0628\u064a\u062a -->\r\n    <div id=\"install-btn-container\" style=\"text-align: center; margin-bottom: 20px; margin-top: 10px;\">\r\n        <button id=\"install-btn\" style=\"background: #27ae60; color: white; border: none; padding: 12px 30px; border-radius: 50px; font-size: 15px; font-weight: bold; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3); cursor: pointer; display: inline-block; width: auto;\"><\/button>\r\n    <\/div>\r\n\r\n    <!-- \u0642\u0633\u0645 \u0622\u064a\u0641\u0648\u0646 -->\r\n    <div id=\"ios-section\" style=\"background: #ffffff; padding: 20px; border-radius: 16px; border: 1px solid #eee; box-shadow: 0 2px 10px rgba(0,0,0,0.03);\">\r\n        <div style=\"display: flex; align-items: center; justify-content: center; margin-bottom: 15px;\">\r\n             <svg id=\"ios-icon\" style=\"width: 24px; height: 24px; flex-shrink: 0;\" viewBox=\"0 0 24 24\" fill=\"#333\">\r\n                <path d=\"M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z\"\/>\r\n            <\/svg>\r\n            <h3 id=\"ios-title\" style=\"color: #333; margin: 0; font-size: 17px;\"><\/h3>\r\n        <\/div>\r\n\r\n        <!-- \u0627\u0644\u062e\u0637\u0648\u0629 1 -->\r\n        <div style=\"background: #f7f7f7; padding: 15px; border-radius: 12px; margin-bottom: 15px;\">\r\n            <h4 id=\"step1-title\" style=\"margin: 0 0 10px 0; color: #e67e22; font-size: 15px;\"><\/h4>\r\n            \r\n            <div style=\"background: rgba(255,255,255,0.8); border-radius: 12px; padding: 12px 8px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd;\">\r\n                <div id=\"safari-left\" style=\"color: #007AFF; font-size: 18px; width: 30px; text-align: center;\"><\/div>\r\n                \r\n                <div style=\"position: relative; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center;\">\r\n                    <div style=\"background: #fff; width: 45px; height: 45px; border-radius: 50%; position: absolute; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 0.5px solid rgba(0,0,0,0.05);\"><\/div>\r\n                    <svg style=\"width: 20px; height: 20px; position: relative; z-index: 2;\" viewBox=\"0 0 24 24\" fill=\"#007AFF\">\r\n                        <path d=\"M16 5.5l-4-4-4 4h3v7h2v-7z\"\/>\r\n                        <path d=\"M20 13v6c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2v-6h2v6h12v-6z\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div id=\"safari-right\" style=\"color: #007AFF; font-size: 18px; font-weight: bold; width: 30px; text-align: center;\"><\/div>\r\n            <\/div>\r\n            <p id=\"step1-desc\" style=\"font-size: 13px; color: #555; margin-top: 8px; text-align: center; margin-bottom: 0;\"><\/p>\r\n        <\/div>\r\n\r\n        <!-- \u0627\u0644\u062e\u0637\u0648\u0629 2 -->\r\n        <div style=\"background: #f7f7f7; padding: 15px; border-radius: 12px;\">\r\n            <h4 id=\"step2-title\" style=\"margin: 0 0 8px 0; color: #e67e22; font-size: 15px;\"><\/h4>\r\n            <p id=\"step2-desc\" style=\"font-size: 13px; margin-bottom: 8px; color: #555;\"><\/p>\r\n            \r\n            <div style=\"background: #fff; border-radius: 8px; padding: 10px; display: flex; align-items: center; border: 1.5px solid #e67e22;\">\r\n                <div id=\"add-icon-box\" style=\"background: #e67e22; width: 35px; height: 35px; border-radius: 8px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;\">\r\n                    <svg style=\"width: 18px; height: 18px;\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n                        <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div id=\"add-text-box\" style=\"flex: 1;\">\r\n                    <div style=\"font-weight: bold; font-size: 14px; color: #333;\">Add to Home Screen<\/div>\r\n                    <div id=\"add-sub-text\" style=\"font-size: 11px; color: #888;\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div style=\"text-align: center; margin-top: 25px; padding-bottom: 10px;\">\r\n        <a id=\"back-btn\" href=\"https:\/\/wafarlii.com\" style=\"display: inline-block; background: #e67e22; color: white; padding: 12px 35px; text-decoration: none; border-radius: 30px; font-size: 15px; font-weight: bold; box-shadow: 0 4px 10px rgba(230, 126, 34, 0.2);\"><\/a>\r\n    <\/div>\r\n\r\n    <!-- \u0633\u0643\u0631\u064a\u0628\u062a \u0627\u0644\u062a\u062d\u0643\u0645 -->\r\n    <script>\r\n        \/\/ 1. \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0644\u063a\u0629 (\u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0639\u0631\u0628\u064a)\r\n        var isArabic = true;\r\n        \r\n        \/\/ \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0643\u0634\u0641 \u0639\u0646 \u0627\u0644\u0644\u063a\u0629 (\u0627\u0644\u0631\u0627\u0628\u0637 \u0623\u0648 \u0648\u0633\u0645 HTML)\r\n        var currentURL = window.location.href;\r\n        \/\/ \u0644\u0648 \u0627\u0644\u0631\u0627\u0628\u0637 \u0641\u064a\u0647 \/en\/ \u064a\u0628\u0642\u0649 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\r\n        if (currentURL.indexOf(\"\/en\/\") !== -1) {\r\n            isArabic = false;\r\n        } \r\n        \/\/ \u0644\u0648 \u0648\u0633\u0645 HTML \u0645\u0643\u062a\u0648\u0628 \u0641\u064a\u0647 en\r\n        else if (document.documentElement.lang && document.documentElement.lang.startsWith(\"en\")) {\r\n            isArabic = false;\r\n        }\r\n\r\n        \/\/ 2. \u0627\u0644\u0646\u0635\u0648\u0635\r\n        var text = {\r\n            title: isArabic ? \"\u062a\u062b\u0628\u064a\u062a \u062a\u0637\u0628\u064a\u0642 \u0648\u0641\u0631\u0644\u064a\" : \"Install Waffarlii App\",\r\n            subtitle: isArabic ? \"\u0623\u0636\u0641 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0644\u0649 \u0634\u0627\u0634\u062a\u0643 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u0648\u0635\u0648\u0644 \u0627\u0644\u0633\u0631\u064a\u0639.\" : \"Add the app to your home screen for quick access.\",\r\n            androidTitle: isArabic ? \"\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a \u0623\u0646\u062f\u0631\u0648\u064a\u062f\" : \"For Android Users\",\r\n            androidDesc: isArabic ? \"\u0627\u0646\u062a\u0638\u0631 \u0631\u0633\u0627\u0644\u0629 <strong>\\\"Add to Home screen\\\"<\/strong> \u0648\u0627\u0636\u063a\u0637 <strong>\\\"Install\\\"<\/strong>.\" : \"Wait for the <strong>\\\"Add to Home screen\\\"<\/strong> prompt and tap <strong>\\\"Install\\\"<\/strong>.\",\r\n            androidTip: isArabic ? \"\ud83d\udca1 \u0644\u0648 \u0644\u0645 \u062a\u0638\u0647\u0631: \u0627\u0636\u063a\u0637 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u062b\u0644\u0627\u062b <strong>\u22ee<\/strong> \u0648\u0627\u062e\u062a\u0631 <strong>\\\"Add to Home screen\\\"<\/strong>.\" : \"\ud83d\udca1 If not shown: Tap the three dots <strong>\u22ee<\/strong> and select <strong>\\\"Add to Home screen\\\"<\/strong>.\",\r\n            installBtn: isArabic ? \"\u062a\u062b\u0628\u064a\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0622\u0646\" : \"Install App Now\",\r\n            iosTitle: isArabic ? \"\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a \u0622\u064a\u0641\u0648\u0646 (iOS)\" : \"For iPhone Users (iOS)\",\r\n            step1Title: isArabic ? \"\u0627\u0644\u062e\u0637\u0648\u0629 1: \u0627\u0636\u063a\u0637 \u0632\u0631 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629\" : \"Step 1: Tap Share Button\",\r\n            step1Desc: isArabic ? \"\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0632\u0631 \u0627\u0644\u0623\u0632\u0631\u0642 (\u0641\u064a \u0627\u0644\u0646\u0635)\" : \"Tap the blue button (in the middle)\",\r\n            step2Title: isArabic ? \"\u0627\u0644\u062e\u0637\u0648\u0629 2: \u0627\u062e\u062a\u0631 \u0627\u0644\u0625\u0636\u0627\u0641\u0629\" : \"Step 2: Add to Home Screen\",\r\n            step2Desc: isArabic ? \"\u0645\u0646 \u0627\u0644\u0642\u0627\u0626\u0645\u0629\u060c \u0627\u0628\u062d\u062b \u0639\u0646:\" : \"From the menu, find:\",\r\n            addSubText: isArabic ? \"\u0625\u0636\u0627\u0641\u0629 \u0644\u0644\u0634\u0627\u0634\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\" : \"Add to Home Screen\",\r\n            backBtn: isArabic ? \"\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0631\u0626\u064a\u0633\u064a\u0629\" : \"Back to Home\",\r\n            safariLeft: isArabic ? \"\u3008\" : \"...\",\r\n            safariRight: isArabic ? \"...\" : \"\u3008\"\r\n        };\r\n\r\n        \/\/ 3. \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0646\u0635\u0648\u0635\r\n        document.getElementById('main-title').innerHTML = text.title;\r\n        document.getElementById('main-subtitle').innerHTML = text.subtitle;\r\n        document.getElementById('android-title').innerText = text.androidTitle;\r\n        document.getElementById('android-desc').innerHTML = text.androidDesc;\r\n        document.getElementById('android-tip').innerHTML = text.androidTip;\r\n        document.getElementById('install-btn').innerText = text.installBtn;\r\n        document.getElementById('ios-title').innerText = text.iosTitle;\r\n        document.getElementById('step1-title').innerText = text.step1Title;\r\n        document.getElementById('step1-desc').innerText = text.step1Desc;\r\n        document.getElementById('step2-title').innerText = text.step2Title;\r\n        document.getElementById('step2-desc').innerText = text.step2Desc;\r\n        document.getElementById('add-sub-text').innerText = text.addSubText;\r\n        document.getElementById('back-btn').innerText = text.backBtn;\r\n        document.getElementById('safari-left').innerHTML = text.safariLeft;\r\n        document.getElementById('safari-right').innerHTML = text.safariRight;\r\n\r\n        \/\/ 4. \u0636\u0628\u0637 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a (RTL \/ LTR)\r\n        var wrapper = document.getElementById('waffarlii-app-wrapper');\r\n        var androidIcon = document.getElementById('android-icon');\r\n        var iosIcon = document.getElementById('ios-icon');\r\n        var step1Title = document.getElementById('step1-title');\r\n        var step2Title = document.getElementById('step2-title');\r\n        var step2Desc = document.getElementById('step2-desc');\r\n        var addTextBox = document.getElementById('add-text-box');\r\n        var addIconBox = document.getElementById('add-icon-box');\r\n\r\n        if (isArabic) {\r\n            wrapper.style.direction = \"rtl\";\r\n            androidIcon.style.marginLeft = \"8px\";\r\n            iosIcon.style.marginLeft = \"8px\";\r\n            step1Title.style.textAlign = \"right\";\r\n            step2Title.style.textAlign = \"right\";\r\n            step2Desc.style.textAlign = \"right\";\r\n            addTextBox.style.textAlign = \"right\";\r\n            addIconBox.style.marginLeft = \"10px\";\r\n        } else {\r\n            wrapper.style.direction = \"ltr\";\r\n            androidIcon.style.marginRight = \"8px\";\r\n            iosIcon.style.marginRight = \"8px\";\r\n            step1Title.style.textAlign = \"left\";\r\n            step2Title.style.textAlign = \"left\";\r\n            step2Desc.style.textAlign = \"left\";\r\n            addTextBox.style.textAlign = \"left\";\r\n            addIconBox.style.marginRight = \"10px\";\r\n        }\r\n\r\n        \/\/ 5. \u0645\u0646\u0637\u0642 \u0627\u0644\u062a\u062b\u0628\u064a\u062a\r\n        let deferredPrompt;\r\n        const installBtn = document.getElementById('install-btn');\r\n        const iosSection = document.getElementById('ios-section');\r\n\r\n        window.addEventListener('beforeinstallprompt', (e) => {\r\n            e.preventDefault();\r\n            deferredPrompt = e;\r\n        });\r\n\r\n        installBtn.addEventListener('click', async () => {\r\n            if (deferredPrompt) {\r\n                deferredPrompt.prompt();\r\n                const { outcome } = await deferredPrompt.userChoice;\r\n                deferredPrompt = null;\r\n            } else {\r\n                const isIos = \/iphone|ipad|ipod\/.test(window.navigator.userAgent.toLowerCase());\r\n                if (isIos) {\r\n                    iosSection.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n                } else {\r\n                    alert(isArabic ? \"\u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0623\u0648 \u0645\u062b\u0628\u062a \u0628\u0627\u0644\u0641\u0639\u0644.\" : \"App is loading or already installed.\");\r\n                }\r\n            }\r\n        });\r\n    <\/script>\r\n    \r\n    <style>\r\n        * { box-sizing: border-box; }\r\n        @media (min-width: 768px) {\r\n            div > h1 { font-size: 32px !important; }\r\n            div > h3 { font-size: 20px !important; }\r\n            .wp-block-html { max-width: 600px; margin: 0 auto !important; }\r\n        }\r\n    <\/style>\r\n<\/div>\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>Add to Home Screen<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-964","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/pages\/964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/comments?post=964"}],"version-history":[{"count":6,"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/pages\/964\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/pages\/964\/revisions\/982"}],"wp:attachment":[{"href":"https:\/\/wafarlii.com\/en\/wp-json\/wp\/v2\/media?parent=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}