{"id":1552,"date":"2025-12-25T10:21:54","date_gmt":"2025-12-25T10:21:54","guid":{"rendered":"https:\/\/wordpress2.vabilo.net\/?page_id=1552"},"modified":"2025-12-30T07:04:37","modified_gmt":"2025-12-30T07:04:37","slug":"tutorials","status":"publish","type":"page","link":"https:\/\/wordpress2.vabilo.net\/ar\/tutorials\/","title":{"rendered":"\u0628\u0631\u0627\u0645\u062c \u062a\u0639\u0644\u064a\u0645\u064a\u0629"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1552\" class=\"elementor elementor-1552 elementor-791\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fff3b89 e-flex e-con-boxed e-con e-parent\" data-id=\"fff3b89\" 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-465d41b elementor-widget elementor-widget-heading\" data-id=\"465d41b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">\u0628\u0631\u0627\u0645\u062c \u062a\u0639\u0644\u064a\u0645\u064a\u0629<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f44be1 e-flex e-con-boxed e-con e-parent\" data-id=\"4f44be1\" 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-2340525 elementor-widget elementor-widget-shortcode\" data-id=\"2340525\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <style>\n        .tutorials-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 20px;\n        }\n\n        @media (max-width: 1024px) {\n            .tutorials-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 600px) {\n            .tutorials-grid {\n                grid-template-columns: 1fr;\n            }\n\t\t\t .modal-content {\n            \n            padding-top: 56.25% !important;\n        }\n        }\n\n        .tutorial-item {\n            background: #fff;\n            border-radius: 10px;\n            overflow: hidden;\n            box-shadow: 0 5px 20px rgba(0,0,0,.08);\n            text-align: center;\n        }\n\n        .tutorial-item img {\n            width: 100%;\n            height: 200px;\n            object-fit: cover;\n        }\n\n        .tutorial-content {\n            padding: 15px;\n        }\n\n        .tutorial-content strong {\n            font-size: 19px;\n            margin-bottom: 10px;display:block\n        }\n\n        .show-tutorial {\n            background: #0073ff;\n            color: #fff;\n            padding: 10px 15px;\n            border-radius: 6px;\n            cursor: pointer;\n            display: inline-block;font-size:15px;\n            margin-top: 10px;\n            text-decoration: none;\n        }\n\n        \/* Modal *\/\n        .tutorial-modal {\n            position: fixed;\n            inset: 0;\n            background: rgba(0,0,0,.7);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 9999;\n        }\n\n        .tutorial-modal.active {\n            display: flex;\n        }\n\n        .modal-content {\n            background: #000;\n            width: 90%;\n            max-width: 800px;\n            position: relative;\n            padding-top: 35%;\n        }\n\n        .modal-content iframe {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n        }\n\n        .modal-close {\n            position: absolute;\n            top: -40px;\n            right: 0;\n            color: #fff;\n            font-size: 30px;\n            cursor: pointer;\n        }\n\n        .tutorial-pagination {\n            margin-top: 30px;\n            text-align: center;\n        }\n\n        .tutorial-pagination a,\n        .tutorial-pagination span {\n            padding: 8px 12px;\n            margin: 0 4px;\n            background: #f1f1f1;\n            border-radius: 4px;\n            text-decoration: none;\n            color: #333;\n        }\n\n        .tutorial-pagination .current {\n            background: #0073ff;\n            color: #fff;\n        }\n    <\/style>\n\n    <div class=\"tutorials-grid\">\n                    <div class=\"tutorial-item\" data-video='&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https:\/\/www.youtube.com\/embed\/2wYtJwDkKIk?si=Lvbn0IPnqjolzjTT&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; allowfullscreen&gt;&lt;\/iframe&gt;'>\n                <img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/wordpress2.vabilo.net\/wp-content\/uploads\/2025\/12\/74-blog-1-1024x576-1-300x169.webp\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\" srcset=\"https:\/\/wordpress2.vabilo.net\/wp-content\/uploads\/2025\/12\/74-blog-1-1024x576-1-300x169.webp 300w, https:\/\/wordpress2.vabilo.net\/wp-content\/uploads\/2025\/12\/74-blog-1-1024x576-1-768x432.webp 768w, https:\/\/wordpress2.vabilo.net\/wp-content\/uploads\/2025\/12\/74-blog-1-1024x576-1.webp 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>                <div class=\"tutorial-content\">\n                    <strong>How to use our platform<\/strong>\n                    <span class=\"show-tutorial\">Show Tutorial<\/span>\n                <\/div>\n            <\/div>\n            <\/div>\n\n    <div class=\"tutorial-pagination\">\n            <\/div>\n\n    <!-- Modal -->\n    <div class=\"tutorial-modal\" id=\"tutorialModal\">\n        <div class=\"modal-content\">\n            <span class=\"modal-close\">&times;<\/span>\n            <div id=\"modalVideo\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            const modal = document.getElementById('tutorialModal');\n            const modalVideo = document.getElementById('modalVideo');\n            const closeBtn = document.querySelector('.modal-close');\n\n            document.querySelectorAll('.show-tutorial').forEach(btn => {\n                btn.addEventListener('click', function () {\n                    const video = this.closest('.tutorial-item').dataset.video;\n                    modalVideo.innerHTML = video;\n                    modal.classList.add('active');\n                });\n            });\n\n            closeBtn.addEventListener('click', closeModal);\n            modal.addEventListener('click', e => {\n                if (e.target === modal) closeModal();\n            });\n\n            function closeModal() {\n                modal.classList.remove('active');\n                modalVideo.innerHTML = '';\n            }\n        });\n    <\/script>\n\n    \n<\/div>\n\t\t\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>\u0628\u0631\u0627\u0645\u062c \u062a\u0639\u0644\u064a\u0645\u064a\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1552","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/pages\/1552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/comments?post=1552"}],"version-history":[{"count":7,"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/pages\/1552\/revisions"}],"predecessor-version":[{"id":1729,"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/pages\/1552\/revisions\/1729"}],"wp:attachment":[{"href":"https:\/\/wordpress2.vabilo.net\/ar\/wp-json\/wp\/v2\/media?parent=1552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}