{"id":10,"date":"2026-06-20T11:07:05","date_gmt":"2026-06-20T11:07:05","guid":{"rendered":"https:\/\/madboulistudio.com\/?page_id=10"},"modified":"2026-06-20T12:17:40","modified_gmt":"2026-06-20T12:17:40","slug":"test","status":"publish","type":"page","link":"https:\/\/madboulistudio.com\/?page_id=10","title":{"rendered":"Test"},"content":{"rendered":"        <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n        \r\n        <style>\r\n            .bwu_retal_1_dzBswc-container {\r\n                width: 100%;\r\n                height: 650px;\r\n                font-family: 'Poppins', sans-serif !important;\r\n                background-color: #0a192f;\r\n                border-radius: 16px;\r\n                overflow: hidden;\r\n                box-shadow: 0 20px 50px rgba(0,0,0,0.4);\r\n                display: flex;\r\n                flex-direction: row-reverse; \/* Arabic RTL feel *\/\r\n                position: relative;\r\n                margin: 20px auto;\r\n            }\r\n\r\n            \/* MAP SECTION AND VIGNETTE (FADE EFFECT) *\/\r\n            .bwu_retal_1_dzBswc-map-wrapper {\r\n                flex: 1;\r\n                position: relative;\r\n                height: 100%;\r\n                overflow: hidden;\r\n            }\r\n\r\n            .bwu_retal_1_dzBswc-map-area {\r\n                width: 100%; height: 100%;\r\n                position: absolute; top:0; left:0;\r\n                background: transparent !important;\r\n                z-index: 1;\r\n            }\r\n\r\n            \/* THE VIGNETTE SHADOW LAYER to blend map edges into background *\/\r\n            .bwu_retal_1_dzBswc-vignette-overlay {\r\n                position: absolute;\r\n                top: 0; left: 0; right: 0; bottom: 0;\r\n                pointer-events: none; \/* Crucial so map is clickable *\/\r\n                box-shadow: inset 0 0 150px 80px #0a192f;\r\n                z-index: 400; \/* Above tiles, below interactive markers *\/\r\n            }\r\n\r\n            \/* ROAD LAYER STYLING *\/\r\n            .bwu-layer-roads {\r\n                filter: invert(100%) opacity(30%);\r\n                mix-blend-mode: screen;\r\n            }\r\n            \r\n            \/* LABELS LAYER STYLING (Keeps place names visible) *\/\r\n            .bwu-layer-labels {\r\n                filter: opacity(70%); \/* adjust transparency of labels *\/\r\n                mix-blend-mode: screen;\r\n            }\r\n\r\n            .bwu_retal_1_dzBswc-map-area .leaflet-container { background: transparent !important; }\r\n\r\n            \/* SIDEBAR - RETAL STYLE *\/\r\n            .bwu_retal_1_dzBswc-sidebar {\r\n                width: 420px;\r\n                background: #ffffff;\r\n                height: 100%;\r\n                box-shadow: -10px 0 30px rgba(0,0,0,0.1);\r\n                z-index: 500;\r\n                display: flex;\r\n                flex-direction: column;\r\n                direction: rtl; \/* RTL Support *\/\r\n            }\r\n\r\n            .bwu_retal_1_dzBswc-sidebar-header {\r\n                padding: 30px 30px 15px 30px;\r\n                background: #f8f9fa;\r\n                border-bottom: 1px solid #eee;\r\n            }\r\n            .bwu_retal_1_dzBswc-sidebar-header h2 { margin: 0; font-size: 24px; font-weight: 800; color: #111; }\r\n\r\n            \/* REGION FILTER TABS *\/\r\n            .bwu-region-filters {\r\n                display: flex; gap: 8px; margin-top: 15px; overflow-x: auto; padding-bottom: 10px;\r\n                scrollbar-width: thin;\r\n            }\r\n            .bwu-filter-btn {\r\n                background: #fff; border: 1px solid #ccc; padding: 6px 14px; border-radius: 20px;\r\n                font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.3s;\r\n                font-family: inherit; color: #333;\r\n            }\r\n            .bwu-filter-btn:hover { border-color: #000; }\r\n            .bwu-filter-btn.active { background: #000; color: #fff; border-color: #000; }\r\n\r\n            .bwu_retal_1_dzBswc-list-scroll {\r\n                flex: 1; overflow-y: auto; padding: 20px; scroll-behavior: smooth;\r\n            }\r\n\r\n            \/* PROJECT CARDS *\/\r\n            .bwu-project-card {\r\n                padding: 20px; margin-bottom: 15px; border: 1px solid #eee; border-radius: 12px;\r\n                cursor: pointer; transition: all 0.3s ease; background: #fff;\r\n            }\r\n            .bwu-project-card:hover { border-color: #000; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }\r\n            .bwu-project-card.active { border-color: #000; background: #000; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }\r\n            .bwu-project-card h3 { margin: 0 0 5px 0; font-size: 18px; font-weight: 700; color: inherit; transition: 0.3s; }\r\n            .bwu-project-card p { margin: 0; font-size: 13px; opacity: 0.7; color: inherit; }\r\n\r\n            \/* EXPANDED DETAILS INSIDE CARD *\/\r\n            .bwu-card-details {\r\n                max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; opacity: 0;\r\n            }\r\n            .bwu-project-card.active .bwu-card-details {\r\n                max-height: 1500px; opacity: 1; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.2);\r\n            }\r\n            .bwu-card-desc { font-size: 14px; line-height: 1.6; margin-bottom: 15px; }\r\n            .bwu-card-gallery img { width: 100%; border-radius: 8px; margin-bottom: 10px; object-fit: cover; }\r\n            \r\n            \/* READ MORE LINK BUTTON *\/\r\n            .bwu-read-more-btn {\r\n                display: inline-block; width: 100%; text-align: center; padding: 12px; margin-top: 10px;\r\n                background: #fff; color: #000; font-weight: 700; border-radius: 6px; text-decoration: none;\r\n                transition: 0.3s;\r\n            }\r\n            .bwu-read-more-btn:hover { background: #f0f0f0; color: #000; text-decoration: none; transform: scale(1.02); }\r\n\r\n            \/* MARKER DOTS PINS *\/\r\n            .bwu-pin-wrapper { display: flex; align-items: center; gap: 10px; pointer-events: none; white-space: nowrap; direction: rtl; }\r\n            .bwu-pin-dot {\r\n                width: 16px; height: 16px; border-radius: 50%;\r\n                box-shadow: 0 0 0 3px rgba(255,255,255,0.2), 0 4px 10px rgba(0,0,0,0.5);\r\n                pointer-events: auto; cursor: pointer; transition: 0.3s;\r\n            }\r\n            .bwu-pin-wrapper.active .bwu-pin-dot { transform: scale(1.5); box-shadow: 0 0 0 6px rgba(255,255,255,0.4), 0 0 20px rgba(255,255,255,0.8); }\r\n            \r\n            .bwu-pin-text { display: flex; flex-direction: column; text-shadow: 0 2px 5px rgba(0,0,0,0.9); color: ; }\r\n            .bwu-pin-text strong { font-size: 15px; font-weight: 800; line-height: 1.1; }\r\n            .bwu-pin-wrapper.active .bwu-pin-text strong { font-size: 18px; text-shadow: 0 2px 10px rgba(255,255,255,0.5); }\r\n            .bwu-pin-text span { font-size: 11px; opacity: 0.9; }\r\n            .leaflet-div-icon { background: transparent !important; border: none !important; }\r\n\r\n            @media (max-width: 991px) {\r\n                .bwu_retal_1_dzBswc-container { flex-direction: column; height: 1000px; }\r\n                .bwu_retal_1_dzBswc-map-wrapper { height: 50vh; flex: none; }\r\n                .bwu_retal_1_dzBswc-sidebar { width: 100%; height: 50vh; }\r\n            }\r\n        <\/style>\r\n\r\n        <div class=\"bwu_retal_1_dzBswc-container\">\r\n            <!-- Sidebar -->\r\n            <div class=\"bwu_retal_1_dzBswc-sidebar\">\r\n                <div class=\"bwu_retal_1_dzBswc-sidebar-header\">\r\n                    <h2>\u0631\u0631\u0631\u0631<\/h2>\r\n                    <!-- Region Filters -->\r\n                    <div class=\"bwu-region-filters\">\r\n                        <button class=\"bwu-filter-btn active\" onclick=\"bwuFilterRegion_bwu_retal_1_dzBswc('all', this)\">\u0627\u0644\u0643\u0644<\/button>\r\n                        <button class=\"bwu-filter-btn\" onclick=\"bwuFilterRegion_bwu_retal_1_dzBswc('central', this)\">\u0627\u0644\u0648\u0633\u0637\u0649<\/button>\r\n                        <button class=\"bwu-filter-btn\" onclick=\"bwuFilterRegion_bwu_retal_1_dzBswc('eastern', this)\">\u0627\u0644\u0634\u0631\u0642\u064a\u0629<\/button>\r\n                        <button class=\"bwu-filter-btn\" onclick=\"bwuFilterRegion_bwu_retal_1_dzBswc('western', this)\">\u0627\u0644\u063a\u0631\u0628\u064a\u0629<\/button>\r\n                        <button class=\"bwu-filter-btn\" onclick=\"bwuFilterRegion_bwu_retal_1_dzBswc('southern', this)\">\u0627\u0644\u062c\u0646\u0648\u0628\u064a\u0629<\/button>\r\n                        <button class=\"bwu-filter-btn\" onclick=\"bwuFilterRegion_bwu_retal_1_dzBswc('northern', this)\">\u0627\u0644\u0634\u0645\u0627\u0644\u064a\u0629<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"bwu_retal_1_dzBswc-list-scroll\" id=\"bwu_retal_1_dzBswc_list\">\r\n                    <!-- Cards injected via JS -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Map -->\r\n            <div class=\"bwu_retal_1_dzBswc-map-wrapper\">\r\n                <div class=\"bwu_retal_1_dzBswc-vignette-overlay\"><\/div>\r\n                <div class=\"bwu_retal_1_dzBswc-map-area\" id=\"bwu_retal_1_dzBswc_map\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const allProjects = [];\r\n            const center = [24.7136, 46.6753];\r\n            const zoom = 12;\r\n            const listContainer = document.getElementById(\"bwu_retal_1_dzBswc_list\");\r\n\r\n            \/\/ Initialize Map\r\n            const map = L.map(\"bwu_retal_1_dzBswc_map\", { zoomControl: false, attributionControl: false }).setView(center, zoom);\r\n            \r\n            \/\/ 1. Base Layer for Roads Only (CartoDB Dark Matter No Labels)\r\n            L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/dark_nolabels\/{z}\/{x}\/{y}{r}.png', { \r\n                maxZoom: 19,\r\n                className: 'bwu-layer-roads'\r\n            }).addTo(map);\r\n\r\n            \/\/ 2. Overlay Layer for Place Names & Street Names (CartoDB Dark Only Labels)\r\n            L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/dark_only_labels\/{z}\/{x}\/{y}{r}.png', { \r\n                maxZoom: 19,\r\n                className: 'bwu-layer-labels',\r\n                pane: 'shadowPane' \/\/ Keeps labels below interactive markers\r\n            }).addTo(map);\r\n\r\n            let currentMarkers = []; \/\/ Array to store active Leaflet markers\r\n\r\n            \/\/ Function to Render Projects based on Region Filter\r\n            window.bwuRenderProjects_bwu_retal_1_dzBswc = function(region = 'all') {\r\n                \/\/ Clear existing markers from map\r\n                currentMarkers.forEach(m => map.removeLayer(m));\r\n                currentMarkers = [];\r\n                listContainer.innerHTML = '';\r\n\r\n                \/\/ Filter Data\r\n                const filteredProjects = region === 'all' ? allProjects : allProjects.filter(p => p.region === region);\r\n\r\n                if(filteredProjects.length === 0) {\r\n                    listContainer.innerHTML = '<p style=\"text-align:center; padding:20px; color:#999;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0634\u0627\u0631\u064a\u0639 \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u062d\u0627\u0644\u064a\u0627\u064b.<\/p>';\r\n                    return;\r\n                }\r\n\r\n                \/\/ Render Data\r\n                filteredProjects.forEach(proj => {\r\n                    const lat = parseFloat(proj.lat);\r\n                    const lng = parseFloat(proj.lng);\r\n                    if (isNaN(lat) || isNaN(lng)) return;\r\n\r\n                    \/\/ Build Marker HTML\r\n                    const markerHtml = `\r\n                        <div class=\"bwu-pin-wrapper\" id=\"pin_${proj.id}\">\r\n                            <div class=\"bwu-pin-dot\" style=\"background-color: ${proj.pin_color};\" onclick=\"bwuTriggerSync_bwu_retal_1_dzBswc('${proj.id}', ${lat}, ${lng})\"><\/div>\r\n                            <div class=\"bwu-pin-text\" style=\"color: ${proj.pin_color};\">\r\n                                <strong>${proj.title}<\/strong>\r\n                                <span>${proj.subtitle}<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                    const icon = L.divIcon({ className: '', html: markerHtml, iconAnchor: [8, 8] });\r\n                    const marker = L.marker([lat, lng], { icon: icon }).addTo(map);\r\n                    currentMarkers.push(marker);\r\n\r\n                    \/\/ Build Sidebar Card\r\n                    let imagesHtml = '';\r\n                    if(proj.images && proj.images.trim() !== '') {\r\n                        proj.images.split(',').forEach(url => {\r\n                            if(url.trim() !== '') imagesHtml += `<img decoding=\"async\" src=\"${url.trim()}\" alt=\"Project Image\">`;\r\n                        });\r\n                    }\r\n\r\n                    \/\/ Add Read More Link if exists\r\n                    let readMoreHtml = '';\r\n                    if(proj.read_more_url && proj.read_more_url.trim() !== '') {\r\n                        readMoreHtml = `<a href=\"${proj.read_more_url}\" target=\"_blank\" class=\"bwu-read-more-btn\" onclick=\"event.stopPropagation();\">\u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644<\/a>`;\r\n                    }\r\n\r\n                    const cardHtml = `\r\n                        <div class=\"bwu-project-card\" id=\"card_${proj.id}\" onclick=\"bwuTriggerSync_bwu_retal_1_dzBswc('${proj.id}', ${lat}, ${lng})\">\r\n                            <h3>${proj.title}<\/h3>\r\n                            <p>${proj.subtitle}<\/p>\r\n                            <div class=\"bwu-card-details\">\r\n                                <div class=\"bwu-card-desc\">${proj.details}<\/div>\r\n                                <div class=\"bwu-card-gallery\">${imagesHtml}<\/div>\r\n                                ${readMoreHtml}\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                    listContainer.innerHTML += cardHtml;\r\n                });\r\n\r\n                \/\/ Auto-fit map to show all filtered markers if there's more than one\r\n                if(currentMarkers.length > 0) {\r\n                    const group = new L.featureGroup(currentMarkers);\r\n                    map.flyToBounds(group.getBounds(), { padding: [50, 50], maxZoom: 14, duration: 1.5 });\r\n                }\r\n            };\r\n\r\n            \/\/ Global function to handle filter button clicks\r\n            window.bwuFilterRegion_bwu_retal_1_dzBswc = function(region, btnElement) {\r\n                \/\/ Update active button styling\r\n                document.querySelectorAll('.bwu-region-filters .bwu-filter-btn').forEach(btn => btn.classList.remove('active'));\r\n                btnElement.classList.add('active');\r\n                \r\n                \/\/ Re-render\r\n                bwuRenderProjects_bwu_retal_1_dzBswc(region);\r\n            };\r\n\r\n            \/\/ Synchronization Function (Map <-> Sidebar)\r\n            window.bwuTriggerSync_bwu_retal_1_dzBswc = function(id, lat, lng) {\r\n                document.querySelectorAll('.bwu-pin-wrapper').forEach(el => el.classList.remove('active'));\r\n                document.querySelectorAll('.bwu-project-card').forEach(el => el.classList.remove('active'));\r\n\r\n                const pinEl = document.getElementById(`pin_${id}`);\r\n                if(pinEl) pinEl.classList.add('active');\r\n\r\n                const cardEl = document.getElementById(`card_${id}`);\r\n                if(cardEl) {\r\n                    cardEl.classList.add('active');\r\n                    cardEl.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n                }\r\n\r\n                \/\/ Fly to location with offset for desktop\r\n                let targetLng = lng;\r\n                if(window.innerWidth > 991) {\r\n                    targetLng = lng + 0.005; \/\/ Offset so pin is not hidden by sidebar\r\n                }\r\n                map.flyTo([lat, targetLng], 15, { animate: true, duration: 1.5 });\r\n            };\r\n\r\n            \/\/ Initial Render (All Regions)\r\n            bwuRenderProjects_bwu_retal_1_dzBswc('all');\r\n        });\r\n        <\/script>\r\n        \n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/madboulistudio.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madboulistudio.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madboulistudio.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madboulistudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madboulistudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":2,"href":"https:\/\/madboulistudio.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/madboulistudio.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/madboulistudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}