{"id":5551,"date":"2025-12-14T20:16:52","date_gmt":"2025-12-14T17:16:52","guid":{"rendered":"https:\/\/eventy.sa\/?page_id=5551"},"modified":"2025-12-14T20:54:50","modified_gmt":"2025-12-14T17:54:50","slug":"green","status":"publish","type":"page","link":"https:\/\/eventy.sa\/ar\/green\/","title":{"rendered":"green"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"5551\" class=\"elementor elementor-5551\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c0a33e e-con-full e-flex e-con e-parent\" data-id=\"0c0a33e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2c1380 elementor-widget elementor-widget-html\" data-id=\"f2c1380\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            -webkit-tap-highlight-color: transparent;\r\n        }\r\n\r\n        html,\r\n        body {\r\n            width: 100%;\r\n            height: 100%;\r\n            overflow: hidden;\r\n            touch-action: manipulation;\r\n        }\r\n\r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            background-color: #000;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .map-container {\r\n            width: 100vw;\r\n            height: 100vh;\r\n            background: #000;\r\n            overflow: hidden;\r\n            position: relative;\r\n        }\r\n\r\n        svg {\r\n            display: block;\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n        }\r\n\r\n        \/* Make pins clickable *\/\r\n        g[id=\"green\"],\r\n        g[id=\"orange\"],\r\n        g[id=\"yellow\"], \r\n        g[id=\"yellow-head\"], \r\n        g[id=\"green-head\"], \r\n            g[id=\"orange-head\"] {\r\n            cursor: pointer;\r\n            transition: filter 0.3s ease, opacity 0.3s ease;\r\n        }\r\n\r\n        \/* Exclude specific classes from pointer cursor and interactions *\/\r\n        .cls-65,\r\n        .cls-59,\r\n        .cls-20,\r\n        .cls-75,\r\n        .cls-58,\r\n        .cls-64,\r\n        .cls-65 *,\r\n        .cls-59 *,\r\n        .cls-20 *,\r\n        .cls-75 *,\r\n        .cls-58 *,\r\n        .cls-64 * {\r\n            cursor: default !important;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        \/* Active pin - glowing effect *\/\r\n        .pin-active {\r\n            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.0));\r\n            opacity: 1 !important;\r\n        }\r\n\r\n        \/* Inactive pins - dim gray with pulsating animation *\/\r\n        .pin-inactive {\r\n            \/* filter: grayscale(100%) !important; *\/\r\n            opacity: 0.5;\r\n            animation: lightPulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        \/* Light pulsating animation for inactive pins *\/\r\n        @keyframes lightPulse {\r\n\r\n            0%,\r\n            100% {\r\n                opacity: 0.3;\r\n            }\r\n\r\n            50% {\r\n                opacity: 0.6;\r\n            }\r\n        }\r\n\r\n        \/* Associated map parts - glowing when active *\/\r\n        .map-part-active {\r\n            \/* filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)) \r\n                    drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)); *\/\r\n            opacity: 1;\r\n            transition: filter 0.3s ease, opacity 0.3s ease;\r\n        }\r\n\r\n        .map-part-inactive {\r\n            \/* filter: grayscale(100%); *\/\r\n            \/* opacity: 0.3; *\/\r\n            transition: filter 0.3s ease, opacity 0.3s ease;\r\n        }\r\n\r\n        #bg {\r\n            filter: none;\r\n        }\r\n    <\/style>\r\n\r\n<body>\r\n    <div class=\"map-container\" id=\"map-container\">\r\n        <!-- SVG will be loaded here -->\r\n    <\/div>\r\n\r\n    <script>\r\n        let hasInteracted = false;\r\n        let currentLocation = 'green';\r\n\r\n        \/\/ Extract location from URL\r\n        function getLocationFromURL() {\r\n            const path = window.location.pathname;\r\n            if (path.includes('\/green')) return 'green';\r\n            if (path.includes('\/orange')) return 'orange';\r\n            if (path.includes('\/yellow')) return 'yellow';\r\n            return 'green'; \/\/ default\r\n        }\r\n\r\n        \/\/ Request fullscreen\r\n        function requestFullscreen() {\r\n            if (!hasInteracted) return;\r\n\r\n            const element = document.documentElement;\r\n            if (element.requestFullscreen) {\r\n                element.requestFullscreen().catch(err => console.log('Fullscreen error:', err));\r\n            } else if (element.webkitRequestFullscreen) {\r\n                element.webkitRequestFullscreen();\r\n            } else if (element.mozRequestFullScreen) {\r\n                element.mozRequestFullScreen();\r\n            } else if (element.msRequestFullscreen) {\r\n                element.msRequestFullscreen();\r\n            }\r\n        }\r\n        async function lockLandscape() {\r\n            try {\r\n                await document.documentElement.requestFullscreen();\r\n                await screen.orientation.lock(\"landscape\");\r\n            } catch (err) {\r\n                console.error(\"Lock failed:\", err);\r\n            }\r\n        }\r\n\r\n\r\n        \/\/ Handle first user interaction\r\n        function handleFirstInteraction() {\r\n            if (!hasInteracted) {\r\n                hasInteracted = true;\r\n                requestFullscreen();\r\n                lockLandscape();\r\n            }\r\n        }\r\n\r\n        \/\/ Check if element is inside #map-line (exclude from modifications)\r\n        function isInsideMapLine(element) {\r\n            if (!element) return false;\r\n            const mapLine = document.getElementById('map-line');\r\n            if (!mapLine) return false;\r\n            return mapLine.contains(element) || element === mapLine;\r\n        }\r\n\r\n        \/\/ Check if element has excluded classes or is inside an element with excluded classes\r\n        const excludedClasses = ['cls-65', 'cls-59', 'cls-20', 'cls-75', 'cls-58', 'cls-64'];\r\n        function hasExcludedClass(element) {\r\n            if (!element) return false;\r\n\r\n            \/\/ Check if element itself has any excluded class\r\n            if (element.classList) {\r\n                for (let cls of excludedClasses) {\r\n                    if (element.classList.contains(cls)) {\r\n                        return true;\r\n                    }\r\n                }\r\n            }\r\n\r\n            \/\/ Check if element is inside an element with excluded class\r\n            let parent = element.parentElement;\r\n            while (parent) {\r\n                if (parent.classList) {\r\n                    for (let cls of excludedClasses) {\r\n                        if (parent.classList.contains(cls)) {\r\n                            return true;\r\n                        }\r\n                    }\r\n                }\r\n                parent = parent.parentElement;\r\n            }\r\n\r\n            return false;\r\n        }\r\n\r\n        \/\/ Set active pin and associated map parts\r\n        function setActiveLocation(location) {\r\n            currentLocation = location;\r\n            const pins = ['green', 'orange', 'yellow'];\r\n\r\n            pins.forEach(pinId => {\r\n                const pin = document.getElementById(pinId);\r\n                if (pin) {\r\n                    \/\/ Skip if pin is inside #map-line\r\n                    if (isInsideMapLine(pin)) return;\r\n\r\n                    if (pinId === location) {\r\n                        \/\/ Active pin - glowing\r\n                        pin.classList.remove('pin-inactive');\r\n                        pin.classList.add('pin-active');\r\n\r\n                        \/\/ Find associated map parts within the same pin group\r\n                        \/\/ Look for paths, circles, and other elements within the pin group\r\n                        const associatedParts = pin.querySelectorAll('path, circle, polyline, polygon, line, rect, ellipse, g');\r\n                        associatedParts.forEach(part => {\r\n                            \/\/ Skip if part is inside #map-line or has excluded classes\r\n                            if (!isInsideMapLine(part) && !hasExcludedClass(part)) {\r\n                                part.classList.add('map-part-active');\r\n                                part.classList.remove('map-part-inactive');\r\n                            }\r\n                        });\r\n                    } else {\r\n                        \/\/ Inactive pins - dim gray with pulse\r\n                        pin.classList.remove('pin-active');\r\n                        pin.classList.add('pin-inactive');\r\n\r\n                        \/\/ Dim associated parts\r\n                        const associatedParts = pin.querySelectorAll('path, circle, polyline, polygon, line, rect, ellipse, g');\r\n                        associatedParts.forEach(part => {\r\n                            \/\/ Skip if part is inside #map-line or has excluded classes\r\n                            if (!isInsideMapLine(part) && !hasExcludedClass(part)) {\r\n                                part.classList.add('map-part-inactive');\r\n                                part.classList.remove('map-part-active');\r\n                            }\r\n                        });\r\n                    }\r\n                }\r\n            });\r\n\r\n            \/\/ Handle associated map parts - look for sibling elements in the same parent group\r\n            const activePin = document.getElementById(location);\r\n            if (activePin && activePin.parentElement && !isInsideMapLine(activePin)) {\r\n                const pinParent = activePin.parentElement;\r\n                \/\/ Find all sibling elements (excluding other pins and #map-line)\r\n                const siblings = Array.from(pinParent.children).filter(child =>\r\n                    child !== activePin &&\r\n                    child.id !== 'green' &&\r\n                    child.id !== 'orange' &&\r\n                    child.id !== 'yellow' &&\r\n                    child.id !== 'map-line' &&\r\n                    !isInsideMapLine(child)\r\n                );\r\n                siblings.forEach(sibling => {\r\n                    if (!isInsideMapLine(sibling) && !hasExcludedClass(sibling)) {\r\n                        sibling.classList.add('map-part-active');\r\n                        sibling.classList.remove('map-part-inactive');\r\n                    }\r\n                });\r\n            }\r\n\r\n            \/\/ Dim siblings of inactive pins\r\n            pins.forEach(pinId => {\r\n                if (pinId !== location) {\r\n                    const inactivePin = document.getElementById(pinId);\r\n                    if (inactivePin && inactivePin.parentElement && !isInsideMapLine(inactivePin)) {\r\n                        const inactiveSiblings = Array.from(inactivePin.parentElement.children).filter(child =>\r\n                            child !== inactivePin &&\r\n                            child.id !== 'green' &&\r\n                            child.id !== 'orange' &&\r\n                            child.id !== 'yellow' &&\r\n                            child.id !== 'map-line' &&\r\n                            !isInsideMapLine(child)\r\n                        );\r\n                        inactiveSiblings.forEach(sibling => {\r\n                            if (!isInsideMapLine(sibling) && !hasExcludedClass(sibling)) {\r\n                                sibling.classList.add('map-part-inactive');\r\n                                sibling.classList.remove('map-part-active');\r\n                            }\r\n                        });\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ Load SVG and make it interactive\r\n        fetch('https:\/\/nidlp.eventy.sa\/wp-content\/uploads\/map.svg')\r\n            .then(response => response.text())\r\n            .then(svgContent => {\r\n                \/\/ Insert SVG into container\r\n                document.getElementById('map-container').innerHTML = svgContent;\r\n\r\n                \/\/ Get initial location from URL\r\n                currentLocation = getLocationFromURL();\r\n\r\n                \/\/ Set initial state\r\n                setActiveLocation(currentLocation);\r\n\r\n                \/\/ Add click handlers to pins\r\n                const pins = ['green', 'orange', 'yellow'];\r\n                pins.forEach(pinId => {\r\n                    const pin = document.getElementById(pinId);\r\n                    if (pin) {\r\n                        pin.style.cursor = 'pointer';\r\n                        pin.addEventListener('click', function (e) {\r\n                            \/\/ Ignore clicks on elements with excluded classes\r\n                            if (hasExcludedClass(e.target)) {\r\n                                return;\r\n                            }\r\n\r\n                            e.preventDefault();\r\n                            e.stopPropagation();\r\n                            handleFirstInteraction();\r\n                            setActiveLocation(pinId);\r\n\r\n                            \/\/ Update URL without page reload\r\n                            const newPath = '\/' + pinId;\r\n                            window.history.pushState({ location: pinId }, '', newPath);\r\n                        });\r\n                    }\r\n                });\r\n\r\n                \/\/ Add click handlers to head elements (same functionality as pins)\r\n                const headElements = {\r\n                    'green-head': 'green',\r\n                    'orange-head': 'orange',\r\n                    'yellow-head': 'yellow'\r\n                };\r\n\r\n                Object.keys(headElements).forEach(headId => {\r\n                    const headElement = document.getElementById(headId);\r\n                    const correspondingPin = headElements[headId];\r\n                    \r\n                    if (headElement) {\r\n                        headElement.style.cursor = 'pointer';\r\n                        headElement.addEventListener('click', function (e) {\r\n                            \/\/ Ignore clicks on elements with excluded classes\r\n                            if (hasExcludedClass(e.target)) {\r\n                                return;\r\n                            }\r\n\r\n                            e.preventDefault();\r\n                            e.stopPropagation();\r\n                            handleFirstInteraction();\r\n                            setActiveLocation(correspondingPin);\r\n\r\n                            \/\/ Update URL without page reload\r\n                            const newPath = '\/' + correspondingPin;\r\n                            \/\/ window.history.pushState({ location: correspondingPin }, '', newPath);\r\n                        });\r\n                    }\r\n                });\r\n\r\n                \/\/ Add touch\/click handlers for fullscreen\r\n                document.addEventListener('click', handleFirstInteraction, { once: true });\r\n                document.addEventListener('touchstart', handleFirstInteraction, { once: true });\r\n            })\r\n            .catch(error => {\r\n                console.error('Error loading SVG:', error);\r\n                document.getElementById('map-container').innerHTML =\r\n                    '<p style=\"padding: 20px; text-align: center; color: red;\">Error loading map. Please make sure map.svg is in the same directory.<\/p>';\r\n            });\r\n\r\n        \/\/ Handle browser back\/forward buttons\r\n        window.addEventListener('popstate', function (event) {\r\n            if (event.state && event.state.location) {\r\n                setActiveLocation(event.state.location);\r\n            } else {\r\n                const location = getLocationFromURL();\r\n                setActiveLocation(location);\r\n            }\r\n        });\r\n    <\/script>\r\n<\/body>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5551","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/pages\/5551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/comments?post=5551"}],"version-history":[{"count":11,"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/pages\/5551\/revisions"}],"predecessor-version":[{"id":5565,"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/pages\/5551\/revisions\/5565"}],"wp:attachment":[{"href":"https:\/\/eventy.sa\/ar\/wp-json\/wp\/v2\/media?parent=5551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}