Contador con Funcionalidades<\/title>\r\n <style>\r\n #contador {\r\n position: absolute;\r\n top: opx;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: black;\r\n background-color: transparent;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n z-index: 1000;\r\n }\r\n .tiempo-agotado {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: 2000;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .tiempo-agotado img {\r\n width: 80%;\r\n height: auto;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"contador\"><\/div>\r\n<div id=\"tiempoAgotado\" class=\"tiempo-agotado\">\r\n <img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Titulo-10.gif\" alt=\"Tiempo Agotado\">\r\n<\/div>\r\n\r\n<audio id=\"audioClock\" preload=\"auto\">\r\n <source src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/clock-clock-sound-clock-clock-time-10343.mp3\" type=\"audio\/mpeg\">\r\n Tu navegador no soporta el elemento de audio.\r\n<\/audio>\r\n\r\n<audio id=\"audioFailure\" preload=\"auto\">\r\n <source src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/failure-1-89170.mp3\" type=\"audio\/mpeg\">\r\n Tu navegador no soporta el elemento de audio.\r\n<\/audio>\r\n\r\n<script>\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n var contador = document.getElementById(\"contador\");\r\n var totalTime = 70; \/\/ 1 minuto y 10 segundos\r\n var intervalId = setInterval(function() {\r\n if (totalTime <= 0) {\r\n clearInterval(intervalId);\r\n contador.style.display = \"none\";\r\n document.getElementById(\"audioFailure\").play();\r\n document.getElementById(\"tiempoAgotado\").style.display = \"flex\";\r\n return;\r\n }\r\n\r\n totalTime--;\r\n var hours = Math.floor(totalTime \/ 3600);\r\n var minutes = Math.floor((totalTime % 3600) \/ 60);\r\n var seconds = totalTime % 60;\r\n contador.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\r\n\r\n if (totalTime <= 10) {\r\n document.getElementById(\"audioClock\").play();\r\n }\r\n\r\n if (totalTime <= 60) {\r\n contador.style.backgroundColor = totalTime % 2 === 0 ? 'white' : '#ff5100';\r\n }\r\n }, 1000);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\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-dd18ae3 e-flex e-con-boxed e-con e-parent\" data-id=\"dd18ae3\" 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-104359a elementor-widget elementor-widget-html\" data-id=\"104359a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Mapa con Haz de Luz<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <style>\r\n body, html {\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n width: 100%;\r\n }\r\n #map {\r\n height: 100vh; \/* Altura completa de la ventana *\/\r\n width: 100vw; \/* Ancho completo de la ventana *\/\r\n }\r\n .custom-control img {\r\n width: 30px;\r\n height: 30px;\r\n background-color: white;\r\n border-radius: 5px;\r\n padding: 5px;\r\n cursor: pointer;\r\n }\r\n .leaflet-top.leaflet-right {\r\n top: 10px !important;\r\n }\r\n .icono-rotado {\r\n transform-origin: center;\r\n }\r\n .alerta-distancia {\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n display: none;\r\n }\r\n .animacion-completo {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: transparent; \/* Fondo transparente *\/\r\n z-index: 1000;\r\n display: none;\r\n }\r\n .animacion-completo img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n max-width: 80%;\r\n max-height: 80%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"map\"><\/div>\r\n<div id=\"alertaDistancia\" class=\"alerta-distancia\"><\/div>\r\n<div class=\"animacion-completo\" id=\"animacionCompleto\">\r\n <img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/postas-Completas-1-1.gif\" alt=\"Postas Completas\">\r\n<\/div>\r\n\r\n<audio id=\"audioAplauso\" preload=\"auto\">\r\n <source src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/applause-2-31567.mp3\" type=\"audio\/mpeg\">\r\n Tu navegador no soporta el elemento de audio.\r\n<\/audio>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n<script>\r\n \/\/ Funci\u00f3n para obtener el valor de una cookie por su nombre\r\n function getCookie(name) {\r\n var value = \"; \" + document.cookie;\r\n var parts = value.split(\"; \" + name + \"=\");\r\n if (parts.length == 2) return parts.pop().split(\";\").shift();\r\n }\r\n\r\n function initMap() {\r\n var map = L.map('map', {\r\n zoomControl: false \/\/ Desactivar los controles de zoom\r\n }).setView([-34.6083, -58.3706], 13);\r\n\r\n \/\/ A\u00f1adir capa de CartoDB\r\n L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}{r}.png', {\r\n maxZoom: 19,\r\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors © <a href=\"https:\/\/carto.com\/attributions\">CARTO<\/a>'\r\n }).addTo(map);\r\n\r\n \/\/ Iconos personalizados\r\n var iconoAzul = L.icon({\r\n iconUrl: 'https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/marker-icon-Naranja.png',\r\n iconSize: [25, 41],\r\n iconAnchor: [12, 41],\r\n popupAnchor: [1, -34],\r\n shadowSize: [41, 41]\r\n });\r\n\r\n var iconoVerde = L.icon({\r\n iconUrl: 'https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/marker-iconcorrect.png',\r\n iconSize: [25, 41],\r\n iconAnchor: [12, 41],\r\n popupAnchor: [1, -34],\r\n shadowSize: [41, 41]\r\n });\r\n\r\n \/\/ Array para almacenar todos los marcadores\r\n var marcadores = [\r\n { id: 'casa1', latlng: [-34.626415999297045, -58.36332540610784], icon: iconoAzul, url: 'https:\/\/play.exploragame.com.ar\/index.php\/postacasa1\/' },\r\n{ id: 'casa2', latlng: [-34.62613842836818, -58.36328468520151], icon: iconoAzul, url: 'https:\/\/play.exploragame.com.ar\/index.php\/postacasa2\/' },\r\n\r\n \/\/ Agrega m\u00e1s marcadores seg\u00fan sea necesario\r\n ];\r\n\r\n var markerObjects = {};\r\n\r\n \/\/ Crear marcadores\r\n marcadores.forEach(function(posta) {\r\n var icon = getStoredIcon(posta.id) || posta.icon;\r\n var marker = L.marker(posta.latlng, { icon: icon }).addTo(map)\r\n .on('click', function() {\r\n if (userLocation) {\r\n var distancia = map.distance(userLocation, marker.getLatLng());\r\n if (distancia > 100) {\r\n marker.bindPopup(\"Esta posta est\u00e1 muy lejos de tu ubicaci\u00f3n\", { closeButton: false }).openPopup();\r\n mostrarAlertaDistancia();\r\n } else {\r\n if (marker.options.icon.options.iconUrl === iconoVerde.options.iconUrl) {\r\n marker.bindPopup(\"Esta posta est\u00e1 completa\", { closeButton: false }).openPopup();\r\n } else {\r\n window.open(posta.url, '_blank'); \/\/ Abrir en una nueva pesta\u00f1a\r\n }\r\n }\r\n } else {\r\n \/\/ Si no se puede obtener la ubicaci\u00f3n del usuario, abrir la posta\r\n window.open(posta.url, '_blank');\r\n }\r\n });\r\n markerObjects[posta.id] = marker;\r\n });\r\n\r\n \/\/ Funci\u00f3n para ajustar el mapa para incluir todos los marcadores\r\n function fitMapToMarkers(map, markers) {\r\n var bounds = new L.LatLngBounds();\r\n markers.forEach(function(marker) {\r\n bounds.extend(marker.getLatLng());\r\n });\r\n map.fitBounds(bounds);\r\n }\r\n\r\n \/\/ Llamar a la funci\u00f3n para ajustar la vista del mapa inicialmente\r\n fitMapToMarkers(map, Object.values(markerObjects));\r\n\r\n \/\/ Funci\u00f3n para bloquear el retroceso en el navegador\r\n window.history.pushState(null, \"\", window.location.href);\r\n window.onpopstate = function() {\r\n window.history.pushState(null, \"\", window.location.href);\r\n };\r\n\r\n \/\/ Funci\u00f3n para obtener el icono almacenado en cookies\r\n function getStoredIcon(postaId) {\r\n var storedIconUrl = getCookie(postaId);\r\n if (storedIconUrl === 'iconoVerde') {\r\n return iconoVerde;\r\n } else {\r\n return null; \/\/ Devolver null si no hay icono almacenado o es azul\r\n }\r\n }\r\n\r\n \/\/ Funci\u00f3n para mostrar la alerta de distancia\r\n function mostrarAlertaDistancia() {\r\n document.getElementById('alertaDistancia').style.display = 'block';\r\n setTimeout(function() {\r\n document.getElementById('alertaDistancia').style.display = 'none';\r\n }, 3000); \/\/ Ocultar la alerta despu\u00e9s de 3 segundos\r\n }\r\n\r\n \/\/ Escuchar mensajes desde las p\u00e1ginas de postas\r\nwindow.addEventListener('message', function(event) {\r\n if (event.data.postaId && markerObjects[event.data.postaId]) {\r\n markerObjects[event.data.postaId].setIcon(iconoVerde);\r\n setStoredIcon(event.data.postaId, 'iconoVerde');\r\n checkAllPostasResolved(); \/\/ Verificar si todas las postas est\u00e1n resueltas\r\n }\r\n});\r\n\r\n\/\/ Funci\u00f3n para verificar si todas las postas est\u00e1n resueltas\r\nfunction checkAllPostasResolved() {\r\n var todasResueltas = Object.values(markerObjects).every(function(marker) {\r\n return marker.options.icon.options.iconUrl === iconoVerde.options.iconUrl;\r\n });\r\n\r\n if (todasResueltas) {\r\n mostrarAnimacionCompleto(); \/\/ Mostrar la animaci\u00f3n de postas completas y redirigir\r\n }\r\n}\r\n\r\n }\r\n\r\n \/\/ Funci\u00f3n para mostrar la animaci\u00f3n de postas completas y redirigir despu\u00e9s\r\n function mostrarAnimacionCompleto() {\r\n var animacion = document.getElementById('animacionCompleto');\r\n animacion.style.display = 'block';\r\n document.getElementById('audioAplauso').play();\r\n\r\n setTimeout(function() {\r\n animacion.style.display = 'none';\r\n window.location.href = 'https:\/\/play.exploragame.com.ar'; \/\/ Redireccionar despu\u00e9s de 5 segundos\r\n }, 5000); \/\/ Mostrar la animaci\u00f3n durante 5 segundos\r\n }\r\n\r\n \/\/ Agregar control de ubicaci\u00f3n\r\n var iconoUbicacion = L.control({ position: 'topright' });\r\n\r\n iconoUbicacion.onAdd = function(map) {\r\n var div = L.DomUtil.create('div', 'custom-control');\r\n div.innerHTML = '<img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/current-location-icon-1.png\" style=\"width: 30px; height: 30px; background-color: white; border-radius: 5px; padding: 5px; cursor: pointer;\">';\r\n\r\n div.onclick = function() {\r\n if (userLocation) {\r\n map.setView(userLocation, 18); \/\/ Ajusta el zoom aqu\u00ed (18 es un ejemplo)\r\n }\r\n };\r\n\r\n return div;\r\n };\r\n\r\n iconoUbicacion.addTo(map); \/\/ A\u00f1ade el control al mapa\r\n\r\n \/\/ Variable para almacenar la ubicaci\u00f3n del usuario\r\n var userLocation = null;\r\n var userMarker = null;\r\n var userDirection = null;\r\n var userCircle = null;\r\n\r\n \/\/ Funci\u00f3n para actualizar la ubicaci\u00f3n y orientaci\u00f3n del usuario\r\n function updateUserLocation(position) {\r\n userLocation = [position.coords.latitude, position.coords.longitude];\r\n var heading = position.coords.heading;\r\n\r\n \/\/ Actualizar marcadores y verificar distancia solo cuando se selecciona una posta\r\n Object.values(markerObjects).forEach(function(marker) {\r\n if (marker.options.icon.options.iconUrl === iconoAzul.options.iconUrl && marker.isPopupOpen()) {\r\n var distancia = map.distance(userLocation, marker.getLatLng());\r\n if (distancia > 100) {\r\n mostrarAlertaDistancia();\r\n }\r\n }\r\n });\r\n\r\n if (!userMarker) {\r\n userMarker = L.marker(userLocation, {\r\n icon: L.divIcon({\r\n html: `<img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Diseno-sin-titulo-2024-06-19T200146.381.png\" class=\"icono-rotado\" style=\"width: 60px; height: 60px; transform: rotate(${heading}deg);\" \/>`,\r\n iconSize: [60, 60],\r\n iconAnchor: [30, 30],\r\n className: 'icono-personalizado'\r\n })\r\n }).addTo(map);\r\n } else {\r\n userMarker.setLatLng(userLocation);\r\n userMarker._icon.querySelector('img').style.transform = `rotate(${heading}deg)`;\r\n }\r\n\r\n if (!userCircle) {\r\n userCircle = L.circle(userLocation, {\r\n color: 'transparent', \/\/ Sin borde\r\n fillColor: '#004AAD',\r\n fillOpacity: 0.2,\r\n radius: 25 \/\/ Radio en metros\r\n }).addTo(map);\r\n } else {\r\n userCircle.setLatLng(userLocation);\r\n }\r\n }\r\n\r\n \/\/ Observar la posici\u00f3n del usuario en tiempo real\r\n if (navigator.geolocation) {\r\n navigator.geolocation.watchPosition(updateUserLocation, function(error) {\r\n console.error('Error obteniendo la ubicaci\u00f3n: ', error);\r\n }, { enableHighAccuracy: true });\r\n } else {\r\n alert('Tu navegador no soporta Geolocalizaci\u00f3n.');\r\n }\r\n }\r\n\r\n \/\/ Inicializar el mapa cuando el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initMap();\r\n });\r\n \r\n \/\/ Bloquear retroceso en el navegador\r\n history.pushState(null, null, location.href);\r\n window.onpopstate = function(event) {\r\n history.go(1);\r\n };\r\n \r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\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-3b0f19f e-flex e-con-boxed e-con e-parent\" data-id=\"3b0f19f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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>Contador con Funcionalidades Tu navegador no soporta el elemento de audio. Tu navegador no soporta el elemento de audio. Mapa con Haz de Luz Tu navegador no soporta el elemento de audio.<\/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":{"footnotes":""},"wf_page_folders":[12],"class_list":["post-6427","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=6427"}],"version-history":[{"count":14,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6427\/revisions"}],"predecessor-version":[{"id":6453,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6427\/revisions\/6453"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6427"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=6427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Contador con Funcionalidades<\/title>\r\n <style>\r\n #contador {\r\n position: absolute;\r\n top: opx;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: black;\r\n background-color: transparent;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n z-index: 1000;\r\n }\r\n .tiempo-agotado {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: 2000;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .tiempo-agotado img {\r\n width: 80%;\r\n height: auto;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"contador\"><\/div>\r\n<div id=\"tiempoAgotado\" class=\"tiempo-agotado\">\r\n <img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Titulo-10.gif\" alt=\"Tiempo Agotado\">\r\n<\/div>\r\n\r\n<audio id=\"audioClock\" preload=\"auto\">\r\n <source src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/clock-clock-sound-clock-clock-time-10343.mp3\" type=\"audio\/mpeg\">\r\n Tu navegador no soporta el elemento de audio.\r\n<\/audio>\r\n\r\n<audio id=\"audioFailure\" preload=\"auto\">\r\n <source src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/failure-1-89170.mp3\" type=\"audio\/mpeg\">\r\n Tu navegador no soporta el elemento de audio.\r\n<\/audio>\r\n\r\n<script>\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n var contador = document.getElementById(\"contador\");\r\n var totalTime = 70; \/\/ 1 minuto y 10 segundos\r\n var intervalId = setInterval(function() {\r\n if (totalTime <= 0) {\r\n clearInterval(intervalId);\r\n contador.style.display = \"none\";\r\n document.getElementById(\"audioFailure\").play();\r\n document.getElementById(\"tiempoAgotado\").style.display = \"flex\";\r\n return;\r\n }\r\n\r\n totalTime--;\r\n var hours = Math.floor(totalTime \/ 3600);\r\n var minutes = Math.floor((totalTime % 3600) \/ 60);\r\n var seconds = totalTime % 60;\r\n contador.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\r\n\r\n if (totalTime <= 10) {\r\n document.getElementById(\"audioClock\").play();\r\n }\r\n\r\n if (totalTime <= 60) {\r\n contador.style.backgroundColor = totalTime % 2 === 0 ? 'white' : '#ff5100';\r\n }\r\n }, 1000);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\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-dd18ae3 e-flex e-con-boxed e-con e-parent\" data-id=\"dd18ae3\" 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-104359a elementor-widget elementor-widget-html\" data-id=\"104359a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Mapa con Haz de Luz<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <style>\r\n body, html {\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n width: 100%;\r\n }\r\n #map {\r\n height: 100vh; \/* Altura completa de la ventana *\/\r\n width: 100vw; \/* Ancho completo de la ventana *\/\r\n }\r\n .custom-control img {\r\n width: 30px;\r\n height: 30px;\r\n background-color: white;\r\n border-radius: 5px;\r\n padding: 5px;\r\n cursor: pointer;\r\n }\r\n .leaflet-top.leaflet-right {\r\n top: 10px !important;\r\n }\r\n .icono-rotado {\r\n transform-origin: center;\r\n }\r\n .alerta-distancia {\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n display: none;\r\n }\r\n .animacion-completo {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: transparent; \/* Fondo transparente *\/\r\n z-index: 1000;\r\n display: none;\r\n }\r\n .animacion-completo img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n max-width: 80%;\r\n max-height: 80%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"map\"><\/div>\r\n<div id=\"alertaDistancia\" class=\"alerta-distancia\"><\/div>\r\n<div class=\"animacion-completo\" id=\"animacionCompleto\">\r\n <img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/postas-Completas-1-1.gif\" alt=\"Postas Completas\">\r\n<\/div>\r\n\r\n<audio id=\"audioAplauso\" preload=\"auto\">\r\n <source src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/applause-2-31567.mp3\" type=\"audio\/mpeg\">\r\n Tu navegador no soporta el elemento de audio.\r\n<\/audio>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n<script>\r\n \/\/ Funci\u00f3n para obtener el valor de una cookie por su nombre\r\n function getCookie(name) {\r\n var value = \"; \" + document.cookie;\r\n var parts = value.split(\"; \" + name + \"=\");\r\n if (parts.length == 2) return parts.pop().split(\";\").shift();\r\n }\r\n\r\n function initMap() {\r\n var map = L.map('map', {\r\n zoomControl: false \/\/ Desactivar los controles de zoom\r\n }).setView([-34.6083, -58.3706], 13);\r\n\r\n \/\/ A\u00f1adir capa de CartoDB\r\n L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}{r}.png', {\r\n maxZoom: 19,\r\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors © <a href=\"https:\/\/carto.com\/attributions\">CARTO<\/a>'\r\n }).addTo(map);\r\n\r\n \/\/ Iconos personalizados\r\n var iconoAzul = L.icon({\r\n iconUrl: 'https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/marker-icon-Naranja.png',\r\n iconSize: [25, 41],\r\n iconAnchor: [12, 41],\r\n popupAnchor: [1, -34],\r\n shadowSize: [41, 41]\r\n });\r\n\r\n var iconoVerde = L.icon({\r\n iconUrl: 'https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/marker-iconcorrect.png',\r\n iconSize: [25, 41],\r\n iconAnchor: [12, 41],\r\n popupAnchor: [1, -34],\r\n shadowSize: [41, 41]\r\n });\r\n\r\n \/\/ Array para almacenar todos los marcadores\r\n var marcadores = [\r\n { id: 'casa1', latlng: [-34.626415999297045, -58.36332540610784], icon: iconoAzul, url: 'https:\/\/play.exploragame.com.ar\/index.php\/postacasa1\/' },\r\n{ id: 'casa2', latlng: [-34.62613842836818, -58.36328468520151], icon: iconoAzul, url: 'https:\/\/play.exploragame.com.ar\/index.php\/postacasa2\/' },\r\n\r\n \/\/ Agrega m\u00e1s marcadores seg\u00fan sea necesario\r\n ];\r\n\r\n var markerObjects = {};\r\n\r\n \/\/ Crear marcadores\r\n marcadores.forEach(function(posta) {\r\n var icon = getStoredIcon(posta.id) || posta.icon;\r\n var marker = L.marker(posta.latlng, { icon: icon }).addTo(map)\r\n .on('click', function() {\r\n if (userLocation) {\r\n var distancia = map.distance(userLocation, marker.getLatLng());\r\n if (distancia > 100) {\r\n marker.bindPopup(\"Esta posta est\u00e1 muy lejos de tu ubicaci\u00f3n\", { closeButton: false }).openPopup();\r\n mostrarAlertaDistancia();\r\n } else {\r\n if (marker.options.icon.options.iconUrl === iconoVerde.options.iconUrl) {\r\n marker.bindPopup(\"Esta posta est\u00e1 completa\", { closeButton: false }).openPopup();\r\n } else {\r\n window.open(posta.url, '_blank'); \/\/ Abrir en una nueva pesta\u00f1a\r\n }\r\n }\r\n } else {\r\n \/\/ Si no se puede obtener la ubicaci\u00f3n del usuario, abrir la posta\r\n window.open(posta.url, '_blank');\r\n }\r\n });\r\n markerObjects[posta.id] = marker;\r\n });\r\n\r\n \/\/ Funci\u00f3n para ajustar el mapa para incluir todos los marcadores\r\n function fitMapToMarkers(map, markers) {\r\n var bounds = new L.LatLngBounds();\r\n markers.forEach(function(marker) {\r\n bounds.extend(marker.getLatLng());\r\n });\r\n map.fitBounds(bounds);\r\n }\r\n\r\n \/\/ Llamar a la funci\u00f3n para ajustar la vista del mapa inicialmente\r\n fitMapToMarkers(map, Object.values(markerObjects));\r\n\r\n \/\/ Funci\u00f3n para bloquear el retroceso en el navegador\r\n window.history.pushState(null, \"\", window.location.href);\r\n window.onpopstate = function() {\r\n window.history.pushState(null, \"\", window.location.href);\r\n };\r\n\r\n \/\/ Funci\u00f3n para obtener el icono almacenado en cookies\r\n function getStoredIcon(postaId) {\r\n var storedIconUrl = getCookie(postaId);\r\n if (storedIconUrl === 'iconoVerde') {\r\n return iconoVerde;\r\n } else {\r\n return null; \/\/ Devolver null si no hay icono almacenado o es azul\r\n }\r\n }\r\n\r\n \/\/ Funci\u00f3n para mostrar la alerta de distancia\r\n function mostrarAlertaDistancia() {\r\n document.getElementById('alertaDistancia').style.display = 'block';\r\n setTimeout(function() {\r\n document.getElementById('alertaDistancia').style.display = 'none';\r\n }, 3000); \/\/ Ocultar la alerta despu\u00e9s de 3 segundos\r\n }\r\n\r\n \/\/ Escuchar mensajes desde las p\u00e1ginas de postas\r\nwindow.addEventListener('message', function(event) {\r\n if (event.data.postaId && markerObjects[event.data.postaId]) {\r\n markerObjects[event.data.postaId].setIcon(iconoVerde);\r\n setStoredIcon(event.data.postaId, 'iconoVerde');\r\n checkAllPostasResolved(); \/\/ Verificar si todas las postas est\u00e1n resueltas\r\n }\r\n});\r\n\r\n\/\/ Funci\u00f3n para verificar si todas las postas est\u00e1n resueltas\r\nfunction checkAllPostasResolved() {\r\n var todasResueltas = Object.values(markerObjects).every(function(marker) {\r\n return marker.options.icon.options.iconUrl === iconoVerde.options.iconUrl;\r\n });\r\n\r\n if (todasResueltas) {\r\n mostrarAnimacionCompleto(); \/\/ Mostrar la animaci\u00f3n de postas completas y redirigir\r\n }\r\n}\r\n\r\n }\r\n\r\n \/\/ Funci\u00f3n para mostrar la animaci\u00f3n de postas completas y redirigir despu\u00e9s\r\n function mostrarAnimacionCompleto() {\r\n var animacion = document.getElementById('animacionCompleto');\r\n animacion.style.display = 'block';\r\n document.getElementById('audioAplauso').play();\r\n\r\n setTimeout(function() {\r\n animacion.style.display = 'none';\r\n window.location.href = 'https:\/\/play.exploragame.com.ar'; \/\/ Redireccionar despu\u00e9s de 5 segundos\r\n }, 5000); \/\/ Mostrar la animaci\u00f3n durante 5 segundos\r\n }\r\n\r\n \/\/ Agregar control de ubicaci\u00f3n\r\n var iconoUbicacion = L.control({ position: 'topright' });\r\n\r\n iconoUbicacion.onAdd = function(map) {\r\n var div = L.DomUtil.create('div', 'custom-control');\r\n div.innerHTML = '<img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/current-location-icon-1.png\" style=\"width: 30px; height: 30px; background-color: white; border-radius: 5px; padding: 5px; cursor: pointer;\">';\r\n\r\n div.onclick = function() {\r\n if (userLocation) {\r\n map.setView(userLocation, 18); \/\/ Ajusta el zoom aqu\u00ed (18 es un ejemplo)\r\n }\r\n };\r\n\r\n return div;\r\n };\r\n\r\n iconoUbicacion.addTo(map); \/\/ A\u00f1ade el control al mapa\r\n\r\n \/\/ Variable para almacenar la ubicaci\u00f3n del usuario\r\n var userLocation = null;\r\n var userMarker = null;\r\n var userDirection = null;\r\n var userCircle = null;\r\n\r\n \/\/ Funci\u00f3n para actualizar la ubicaci\u00f3n y orientaci\u00f3n del usuario\r\n function updateUserLocation(position) {\r\n userLocation = [position.coords.latitude, position.coords.longitude];\r\n var heading = position.coords.heading;\r\n\r\n \/\/ Actualizar marcadores y verificar distancia solo cuando se selecciona una posta\r\n Object.values(markerObjects).forEach(function(marker) {\r\n if (marker.options.icon.options.iconUrl === iconoAzul.options.iconUrl && marker.isPopupOpen()) {\r\n var distancia = map.distance(userLocation, marker.getLatLng());\r\n if (distancia > 100) {\r\n mostrarAlertaDistancia();\r\n }\r\n }\r\n });\r\n\r\n if (!userMarker) {\r\n userMarker = L.marker(userLocation, {\r\n icon: L.divIcon({\r\n html: `<img decoding=\"async\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Diseno-sin-titulo-2024-06-19T200146.381.png\" class=\"icono-rotado\" style=\"width: 60px; height: 60px; transform: rotate(${heading}deg);\" \/>`,\r\n iconSize: [60, 60],\r\n iconAnchor: [30, 30],\r\n className: 'icono-personalizado'\r\n })\r\n }).addTo(map);\r\n } else {\r\n userMarker.setLatLng(userLocation);\r\n userMarker._icon.querySelector('img').style.transform = `rotate(${heading}deg)`;\r\n }\r\n\r\n if (!userCircle) {\r\n userCircle = L.circle(userLocation, {\r\n color: 'transparent', \/\/ Sin borde\r\n fillColor: '#004AAD',\r\n fillOpacity: 0.2,\r\n radius: 25 \/\/ Radio en metros\r\n }).addTo(map);\r\n } else {\r\n userCircle.setLatLng(userLocation);\r\n }\r\n }\r\n\r\n \/\/ Observar la posici\u00f3n del usuario en tiempo real\r\n if (navigator.geolocation) {\r\n navigator.geolocation.watchPosition(updateUserLocation, function(error) {\r\n console.error('Error obteniendo la ubicaci\u00f3n: ', error);\r\n }, { enableHighAccuracy: true });\r\n } else {\r\n alert('Tu navegador no soporta Geolocalizaci\u00f3n.');\r\n }\r\n }\r\n\r\n \/\/ Inicializar el mapa cuando el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initMap();\r\n });\r\n \r\n \/\/ Bloquear retroceso en el navegador\r\n history.pushState(null, null, location.href);\r\n window.onpopstate = function(event) {\r\n history.go(1);\r\n };\r\n \r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\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-3b0f19f e-flex e-con-boxed e-con e-parent\" data-id=\"3b0f19f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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>Contador con Funcionalidades Tu navegador no soporta el elemento de audio. Tu navegador no soporta el elemento de audio. Mapa con Haz de Luz Tu navegador no soporta el elemento de audio.<\/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":{"footnotes":""},"wf_page_folders":[12],"class_list":["post-6427","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=6427"}],"version-history":[{"count":14,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6427\/revisions"}],"predecessor-version":[{"id":6453,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6427\/revisions\/6453"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6427"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=6427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}