{"id":389,"date":"2026-09-30T20:09:58","date_gmt":"2026-09-30T17:09:58","guid":{"rendered":"https:\/\/tech2.altib-albadil.com\/?p=389"},"modified":"2026-09-30T20:16:41","modified_gmt":"2026-09-30T17:16:41","slug":"%d8%a8%d9%8a%d8%a8","status":"publish","type":"post","link":"https:\/\/tech2.altib-albadil.com\/?p=389","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <title>\u0643\u0627\u0634\u0641 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 &#8211; Mini App<\/title>\n    <!-- Telegram Web App JS -->\n    <script src=\"https:\/\/telegram.org\/js\/telegram-web-app.js\"><\/script>\n    <!-- Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Font Awesome -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    \n    <style>\n        :root {\n            --bg-color: #f4f6f9;\n            --text-color: #2c3e50;\n            --card-bg: #ffffff;\n            --primary-color: #0088cc;\n            --secondary-color: #f8f9fa;\n        }\n\n        body {\n            margin: 0;\n            padding: 0;\n            font-family: 'Tajawal', sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-color);\n            -webkit-font-smoothing: antialiased;\n        }\n\n        .header {\n            background: linear-gradient(135deg, #0088cc, #005f99);\n            color: white;\n            padding: 30px 20px 20px;\n            border-bottom-left-radius: 25px;\n            border-bottom-right-radius: 25px;\n            text-align: center;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n        }\n\n        .header h1 { margin: 0; font-size: 24px; font-weight: 700; }\n        .header p { margin: 5px 0 0; font-size: 14px; opacity: 0.9; }\n\n        .user-greeting {\n            margin-top: 15px;\n            font-size: 16px;\n            font-weight: 500;\n            background: rgba(255,255,255,0.2);\n            padding: 8px 15px;\n            border-radius: 20px;\n            display: inline-block;\n        }\n\n        .container { padding: 20px; max-width: 600px; margin: 0 auto; }\n\n        .search-box {\n            background-color: var(--card-bg);\n            border-radius: 16px;\n            padding: 20px;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n            margin-top: -25px;\n            position: relative;\n        }\n\n        .input-group { position: relative; margin-bottom: 15px; }\n        .input-group i {\n            position: absolute; right: 15px; top: 50%; transform: translateY(-50%);\n            color: #95a5a6; font-size: 18px;\n        }\n\n        .search-input {\n            width: 100%; padding: 15px 15px 15px 40px;\n            border: 2px solid var(--secondary-color);\n            border-radius: 12px; font-size: 16px; font-family: inherit;\n            background-color: var(--secondary-color); color: var(--text-color);\n            box-sizing: border-box; outline: none; transition: all 0.3s ease;\n        }\n        .search-input:focus { border-color: var(--primary-color); background-color: var(--card-bg); }\n\n        .search-btn {\n            width: 100%; background-color: var(--primary-color);\n            color: white; border: none; padding: 15px;\n            border-radius: 12px; font-size: 16px; font-weight: 700;\n            font-family: inherit; cursor: pointer;\n            box-shadow: 0 4px 10px rgba(0, 136, 204, 0.3); transition: background 0.3s;\n        }\n        .search-btn:active { transform: scale(0.98); }\n\n        .ad-space {\n            margin-top: 20px; background-color: var(--card-bg);\n            border-radius: 16px; padding: 15px; text-align: center;\n            border: 1px dashed #bdc3c7; color: #7f8c8d; font-size: 14px;\n        }\n\n        .results-container { margin-top: 20px; display: none; }\n        .result-card {\n            background-color: var(--card-bg); border-radius: 16px;\n            padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n            display: flex; align-items: center; margin-bottom: 15px;\n            border-right: 4px solid var(--primary-color);\n        }\n\n        .avatar {\n            width: 50px; height: 50px; background: linear-gradient(135deg, #f1c40f, #f39c12);\n            border-radius: 50%; display: flex; align-items: center; justify-content: center;\n            color: white; font-size: 24px; margin-left: 15px; flex-shrink: 0;\n        }\n\n        .info h3 { margin: 0 0 5px 0; font-size: 18px; color: var(--text-color); }\n        .info p { margin: 0; font-size: 14px; color: #7f8c8d; }\n\n        .loader { display: none; text-align: center; margin-top: 30px; }\n        .spinner {\n            border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: var(--primary-color);\n            border-radius: 50%; width: 40px; height: 40px;\n            animation: spin 1s linear infinite; margin: 0 auto;\n        }\n        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"header\">\n        <h1>\ud83d\udd0d \u0643\u0627\u0634\u0641 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0630\u0643\u064a<\/h1>\n        <p>\u0627\u0628\u062d\u062b \u0639\u0646 \u0623\u064a \u0631\u0642\u0645 \u0648\u0627\u0639\u0631\u0641 \u0647\u0648\u064a\u062a\u0647 \u0641\u0648\u0631\u0627\u064b<\/p>\n        <div class=\"user-greeting\" id=\"userGreeting\">\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0643!<\/div>\n    <\/div>\n\n    <div class=\"container\">\n        <div class=\"search-box\">\n            <div class=\"input-group\">\n                <i class=\"fas fa-search\"><\/i>\n                <input type=\"tel\" id=\"phoneInput\" class=\"search-input\" placeholder=\"\u0623\u062f\u062e\u0644 \u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641 (\u0645\u062b\u0627\u0644: 9665...)\" autocomplete=\"off\">\n            <\/div>\n            <button class=\"search-btn\" onclick=\"performSearch()\">\n                <i class=\"fas fa-search-location\"><\/i> \u0627\u0628\u062d\u062b \u0627\u0644\u0622\u0646\n            <\/button>\n        <\/div>\n\n        <!-- \u0645\u0633\u0627\u062d\u0629 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0623\u062f\u0633\u0646\u0633 (\u0636\u0639 \u0643\u0648\u062f \u0627\u0644\u0625\u0639\u0644\u0627\u0646 \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0646\u0635) -->\n        <div class=\"ad-space\">\n            \u0645\u0633\u0627\u062d\u0629 \u0645\u062e\u0635\u0635\u0629 \u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644 \u0623\u062f\u0633\u0646\u0633 \ud83d\udcb5\n        <\/div>\n\n        <div class=\"loader\" id=\"loader\">\n            <div class=\"spinner\"><\/div>\n            <p>\u062c\u0627\u0631\u064a \u0627\u0644\u0628\u062d\u062b \u0641\u064a \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a&#8230;<\/p>\n        <\/div>\n\n        <div class=\"results-container\" id=\"resultsArea\">\n            <div class=\"result-card\">\n                <div class=\"avatar\"><i class=\"fas fa-user\"><\/i><\/div>\n                <div class=\"info\">\n                    <h3 id=\"resultName\">\u0627\u0633\u0645 \u0627\u0644\u0645\u062a\u0635\u0644<\/h3>\n                    <p id=\"resultPhone\">+966 5X XXX XXXX<\/p>\n                <\/div>\n            <\/div>\n            <button class=\"search-btn\" style=\"background-color: #27ae60; margin-top: 10px;\" onclick=\"tg.close()\">\n                <i class=\"fab fa-telegram-plane\"><\/i> \u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        const tg = window.Telegram.WebApp;\n        tg.expand();\n        \n        \/\/ \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u062a\u062a\u063a\u064a\u0631 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u062d\u0633\u0628 \u0648\u0636\u0639 \u062c\u0647\u0627\u0632 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 (\u0644\u064a\u0644\u064a\/\u0646\u0647\u0627\u0631\u064a)\n        document.documentElement.style.setProperty('--bg-color', tg.themeParams.bg_color);\n        document.documentElement.style.setProperty('--text-color', tg.themeParams.text_color);\n        document.documentElement.style.setProperty('--card-bg', tg.themeParams.secondary_bg_color || '#ffffff');\n        document.documentElement.style.setProperty('--primary-color', tg.themeParams.button_color || '#0088cc');\n\n        if (tg.initDataUnsafe && tg.initDataUnsafe.user) {\n            document.getElementById('userGreeting').innerHTML = `\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0643 \u064a\u0627 <b>${tg.initDataUnsafe.user.first_name}<\/b> \ud83d\udc4b`;\n        }\n\n        function performSearch() {\n            const phone = document.getElementById('phoneInput').value;\n            if(!phone || phone.length < 5) {\n                tg.showAlert(\"\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0631\u0642\u0645 \u0647\u0627\u062a\u0641 \u0635\u062d\u064a\u062d!\");\n                return;\n            }\n\n            document.getElementById('resultsArea').style.display = 'none';\n            document.getElementById('loader').style.display = 'block';\n\n            \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0633\u064a\u0631\u0641\u0631\n            setTimeout(() => {\n                document.getElementById('loader').style.display = 'none';\n                document.getElementById('resultName').innerText = \"\u0645\u062d\u0645\u062f \u0639\u0628\u062f\u0627\u0644\u0644\u0647 (\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642)\";\n                document.getElementById('resultPhone').innerText = phone;\n                document.getElementById('resultsArea').style.display = 'block';\n                tg.HapticFeedback.notificationOccurred('success');\n            }, 1500);\n        }\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0643\u0627\u0634\u0641 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 &#8211; Mini App \ud83d\udd0d \u0643\u0627\u0634\u0641 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0630\u0643\u064a \u0627\u0628\u062d\u062b \u0639\u0646 \u0623\u064a \u0631\u0642\u0645 \u0648\u0627\u0639\u0631\u0641 \u0647\u0648\u064a\u062a\u0647 \u0641\u0648\u0631\u0627\u064b \u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0643! \u0627\u0628\u062d\u062b \u0627\u0644\u0622\u0646 \u0645\u0633\u0627\u062d\u0629 \u0645\u062e\u0635\u0635\u0629 \u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644 \u0623\u062f\u0633\u0646\u0633 \ud83d\udcb5 \u062c\u0627\u0631\u064a \u0627\u0644\u0628\u062d\u062b \u0641\u064a \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a&#8230; \u0627\u0633\u0645 \u0627\u0644\u0645\u062a\u0635\u0644 +966 5X XXX XXXX \u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-389","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=\/wp\/v2\/posts\/389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=389"}],"version-history":[{"count":2,"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=\/wp\/v2\/posts\/389\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=\/wp\/v2\/posts\/389\/revisions\/391"}],"wp:attachment":[{"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech2.altib-albadil.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}