Contador con Funcionalidades<\/title>\r\n <style>\r\n #contador {\r\n position: absolute;\r\n top: 0;\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 = 7200; \/\/ 1 minuto y 10 segundos en segundos\r\n\r\n function startCountdown(startTime) {\r\n var intervalId = setInterval(function() {\r\n var currentTime = Math.floor(Date.now() \/ 1000);\r\n var elapsedTime = currentTime - startTime;\r\n var remainingTime = totalTime - elapsedTime;\r\n\r\n if (remainingTime <= 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 var hours = Math.floor(remainingTime \/ 3600);\r\n var minutes = Math.floor((remainingTime % 3600) \/ 60);\r\n var seconds = remainingTime % 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 (remainingTime <= 10) {\r\n document.getElementById(\"audioClock\").play();\r\n }\r\n\r\n if (remainingTime <= 60) {\r\n contador.style.backgroundColor = remainingTime % 2 === 0 ? 'white' : '#ff5100';\r\n }\r\n }, 1000);\r\n }\r\n\r\n \/\/ Verificamos si ya existe un tiempo de inicio guardado\r\n var storedStartTime = localStorage.getItem('startTime');\r\n if (storedStartTime) {\r\n \/\/ Si ya existe un tiempo de inicio, lo usamos para calcular el tiempo restante\r\n startCountdown(parseInt(storedStartTime));\r\n } else {\r\n \/\/ Si no existe un tiempo de inicio, lo establecemos y lo guardamos en localStorage\r\n var startTime = Math.floor(Date.now() \/ 1000);\r\n localStorage.setItem('startTime', startTime);\r\n startCountdown(startTime);\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<div class=\"elementor-element elementor-element-104359a elementor-widget-mobile__width-inherit 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 Pol\u00edgonos y Ubicaci\u00f3n<\/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\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\r\n.leaflet-top.leaflet-right {\r\n top: 10px !important;\r\n}\r\n\r\n.icono-rotado {\r\n transform-origin: center;\r\n}\r\n.leaflet-control-zoom {\r\n display: none;\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"map\"><\/div>\r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n <script>\r\n \/\/ Inicializar el mapa\r\n const map = L.map('map').setView([-34.608067, -58.366564], 14);\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 \/\/ Definir pol\u00edgonos\r\n const polygons = [\r\n {\r\n coordinates: [\r\n [-34.608067316587594, -58.366563944133304],\r\n [-34.61202598778884, -58.366167190354716],\r\n [-34.61200213358874, -58.36562615869833],\r\n [-34.60808020902425, -58.36602353271081],\r\n [-34.608067316587594, -58.366563944133304]\r\n ],\r\n color: '#ff5100', \/\/ Naranja\r\n number: 1\r\n },\r\n {\r\n coordinates: [\r\n [-34.61044919407624, -58.363928569808735],\r\n [-34.6115953233288, -58.364588315409335],\r\n [-34.61166776252656, -58.364578257380956],\r\n [-34.61237654906943, -58.36452041525321],\r\n [-34.612112077185905, -58.36152547840797],\r\n [-34.610366541630235, -58.36198821543135],\r\n [-34.61044919407624, -58.363928569808735]\r\n ],\r\n color: '#50c878', \/\/ Verde\r\n number: 2\r\n },\r\n {\r\n coordinates: [\r\n [-34.607978972519696, -58.36604472089364],\r\n [-34.61048146954142, -58.36032157488205],\r\n [-34.605086733079816, -58.362044086886954],\r\n [-34.6050683204091, -58.36454955889489],\r\n [-34.60552863593495, -58.36638392232881],\r\n [-34.607978972519696, -58.36604472089364]\r\n ],\r\n color: '#87ceeb', \/\/ Azul cielo\r\n number: 3\r\n }\r\n ];\r\n\r\n \/\/ A\u00f1adir pol\u00edgonos al mapa\r\npolygons.forEach(polygon => {\r\n \/\/ Crear el pol\u00edgono en el mapa\r\n const leafletPolygon = L.polygon(polygon.coordinates, {\r\n color: polygon.color,\r\n weight: 2,\r\n opacity: 0.8,\r\n fillColor: polygon.color,\r\n fillOpacity: 0.5\r\n }).addTo(map);\r\n\r\n \/\/ Calcular el centro del pol\u00edgono\r\n const polygonCenter = leafletPolygon.getBounds().getCenter();\r\n\r\n \/\/ Crear la imagen como una etiqueta en el centro del pol\u00edgono\r\n const imageUrl = 'https:\/\/play.exploragame.com.ar\/wp-content\/uploads\/2024\/12\/Candado-cerrado.png';\r\n const image = L.divIcon({\r\n html: `<img decoding=\"async\" src=\"${imageUrl}\" style=\"width: 25px; height: 25px;\"\/>`, \/\/ Tama\u00f1o de la imagen\r\n iconSize: [25, 25], \/\/ Tama\u00f1o de la imagen\r\n iconAnchor: [12.5, 12.5], \/\/ Centrar la imagen (mitad del tama\u00f1o de la imagen)\r\n className: 'image-marker' \/\/ Clase personalizada para poder estilizar si es necesario\r\n });\r\n\r\n \/\/ Colocar la imagen sobre el centro del pol\u00edgono\r\n L.marker(polygonCenter, {\r\n icon: image\r\n }).addTo(map);\r\n});\r\n\r\n\r\n \/\/ Agregar control de ubicaci\u00f3n\r\n var iconoUbicacion = L.control({ position: 'bottomright' });\r\n\r\n iconoUbicacion.onAdd = function(map) {\r\n var div = L.DomUtil.create('div', 'custom-control');\r\n \r\n \/\/ Estilo para subir el \u00edcono\r\n div.style.marginBottom = '50px'; \/\/ Ajusta el valor seg\u00fan sea necesario\r\n \r\n \/\/ Contenido del \u00edcono con estilo existente\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 \/\/ Acci\u00f3n del clic\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 userCircle = null;\r\n\r\n \/\/ Inicializar el seguimiento de la ubicaci\u00f3n del usuario\r\n let watchID;\r\n\r\n if (navigator.geolocation) {\r\n watchID = navigator.geolocation.watchPosition(\r\n function (position) {\r\n updateUserLocation(position); \/\/ Actualizar ubicaci\u00f3n\r\n },\r\n function (error) {\r\n console.error('Error obteniendo la ubicaci\u00f3n: ', error);\r\n alert('Error obteniendo ubicaci\u00f3n: ' + error.message);\r\n },\r\n {\r\n enableHighAccuracy: true,\r\n maximumAge: 10000,\r\n timeout: 20000,\r\n }\r\n );\r\n\r\n window.addEventListener('beforeunload', () => {\r\n navigator.geolocation.clearWatch(watchID);\r\n });\r\n } else {\r\n alert('Tu navegador no soporta Geolocalizaci\u00f3n.');\r\n }\r\n\r\n \/\/ Funci\u00f3n para actualizar la ubicaci\u00f3n del usuario\r\n function updateUserLocation(position) {\r\n userLocation = [position.coords.latitude, position.coords.longitude];\r\n const heading = position.coords.heading;\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 || 0}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 || 0}deg);\r\n }\r\n\r\n if (!userCircle) {\r\n userCircle = L.circle(userLocation, {\r\n color: 'transparent',\r\n fillColor: '#004AAD',\r\n fillOpacity: 0.2,\r\n radius: 25,\r\n }).addTo(map);\r\n } else {\r\n userCircle.setLatLng(userLocation);\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para ajustar el mapa para incluir todos los pol\u00edgonos con un margen ajustado\r\nfunction fitMapToPolygons(map, polygons) {\r\n var bounds = new L.LatLngBounds();\r\n \r\n \/\/ Expandir los l\u00edmites para incluir cada pol\u00edgono\r\n polygons.forEach(function(polygon) {\r\n bounds.extend(polygon.getBounds());\r\n });\r\n\r\n \/\/ Aplicar los l\u00edmites al mapa con una opci\u00f3n de margen\r\n map.fitBounds(bounds, {\r\n padding: [50, 50] \/\/ Ajusta los valores de padding en p\u00edxeles seg\u00fan necesites\r\n });\r\n}\r\n\r\n\/\/ Llamar a la funci\u00f3n para ajustar la vista del mapa inicialmente\r\nfitMapToPolygons(map, Object.values(polygonObjects));\r\n\r\n\/\/ Bloquear el retroceso en el navegador\r\nwindow.history.pushState(null, \"\", window.location.href);\r\nwindow.onpopstate = function() {\r\n window.history.pushState(null, \"\", window.location.href);\r\n};\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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-d839ee5 e-flex e-con-boxed e-con e-parent\" data-id=\"d839ee5\" 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-28be849 elementor-widget elementor-widget-html\" data-id=\"28be849\" 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=\"es\">\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>Formulario Capit\u00e1n<\/title>\r\n <style>\r\n #captain-selection {\r\n background-color: #ff5100;\r\n color: #ffffff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 1000;\r\n width: 80%;\r\n max-width: 500px;\r\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n button {\r\n background-color: #ffffff;\r\n color: #ff5100;\r\n border: none;\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n margin-top: 10px;\r\n }\r\n\r\n #chat-widget {\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"captain-selection\">\r\n <p>\u00bfQui\u00e9n ser\u00e1 el Capit\u00e1n? <\/br> Selecciona la opci\u00f3n correspondiente:<\/p>\r\n <form id=\"captain-form\">\r\n <label>\r\n <input type=\"radio\" name=\"captain_choice\" value=\"captain\" id=\"is_captain\"> Soy el Capit\u00e1n\r\n <\/label>\r\n <br>\r\n <label>\r\n <input type=\"radio\" name=\"captain_choice\" value=\"not_captain\" id=\"not_captain\"> Ya elegimos Capit\u00e1n (no soy yo)\r\n <\/label>\r\n <br><br>\r\n <button type=\"submit\">Enviar<\/button>\r\n <\/form>\r\n<\/div>\r\n\r\n<div id=\"chat-widget\"><\/div>\r\n\r\n<script>\r\n const THREE_HOURS = 3 * 60 * 60 * 1000; \/\/ 3 horas en milisegundos\r\n\r\n \/\/ Al cargar la p\u00e1gina\r\n window.addEventListener(\"DOMContentLoaded\", function() {\r\n const captainSelection = document.getElementById(\"captain-selection\");\r\n const chatWidget = document.getElementById(\"chat-widget\");\r\n\r\n \/\/ Verifica el estado y el tiempo guardado en localStorage\r\n const savedStatus = JSON.parse(localStorage.getItem(\"captainStatus\"));\r\n const now = new Date().getTime();\r\n\r\n if (savedStatus && now - savedStatus.timestamp < THREE_HOURS) {\r\n if (savedStatus.isCaptain) {\r\n captainSelection.style.display = \"none\";\r\n chatWidget.style.display = \"block\";\r\n loadChatWidget();\r\n } else {\r\n captainSelection.style.display = \"none\";\r\n chatWidget.style.display = \"none\";\r\n }\r\n }\r\n });\r\n\r\n \/\/ Funci\u00f3n para cargar el widget de chat de Tawk.to\r\n function loadChatWidget() {\r\n const script = document.createElement(\"script\");\r\n script.type = \"text\/javascript\";\r\n script.src = \"https:\/\/embed.tawk.to\/6639414f07f59932ab3cb02f\/1ht7qe846\"; \/\/ ID de Tawk.to\r\n script.async = true;\r\n document.getElementsByTagName(\"head\")[0].appendChild(script);\r\n }\r\n\r\n \/\/ Manejo del formulario\r\n document.getElementById(\"captain-form\").addEventListener(\"submit\", function(event) {\r\n event.preventDefault();\r\n\r\n const isCaptainChecked = document.getElementById(\"is_captain\").checked;\r\n const notCaptainChecked = document.getElementById(\"not_captain\").checked;\r\n\r\n if (isCaptainChecked) {\r\n localStorage.setItem(\"captainStatus\", JSON.stringify({ isCaptain: true, timestamp: new Date().getTime() }));\r\n document.getElementById(\"captain-selection\").style.display = \"none\";\r\n document.getElementById(\"chat-widget\").style.display = \"block\";\r\n loadChatWidget();\r\n } else if (notCaptainChecked) {\r\n localStorage.setItem(\"captainStatus\", JSON.stringify({ isCaptain: false, timestamp: new Date().getTime() }));\r\n document.getElementById(\"captain-selection\").style.display = \"none\";\r\n document.getElementById(\"chat-widget\").style.display = \"none\";\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\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 Pol\u00edgonos y Ubicaci\u00f3n Formulario Capit\u00e1n \u00bfQui\u00e9n ser\u00e1 el Capit\u00e1n? Selecciona la opci\u00f3n correspondiente: Soy el Capit\u00e1n Ya elegimos Capit\u00e1n (no soy yo) Enviar<\/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":[17],"class_list":["post-9167","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/9167","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=9167"}],"version-history":[{"count":285,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/9167\/revisions"}],"predecessor-version":[{"id":9492,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/9167\/revisions\/9492"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=9167"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=9167"}],"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: 0;\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 = 7200; \/\/ 1 minuto y 10 segundos en segundos\r\n\r\n function startCountdown(startTime) {\r\n var intervalId = setInterval(function() {\r\n var currentTime = Math.floor(Date.now() \/ 1000);\r\n var elapsedTime = currentTime - startTime;\r\n var remainingTime = totalTime - elapsedTime;\r\n\r\n if (remainingTime <= 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 var hours = Math.floor(remainingTime \/ 3600);\r\n var minutes = Math.floor((remainingTime % 3600) \/ 60);\r\n var seconds = remainingTime % 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 (remainingTime <= 10) {\r\n document.getElementById(\"audioClock\").play();\r\n }\r\n\r\n if (remainingTime <= 60) {\r\n contador.style.backgroundColor = remainingTime % 2 === 0 ? 'white' : '#ff5100';\r\n }\r\n }, 1000);\r\n }\r\n\r\n \/\/ Verificamos si ya existe un tiempo de inicio guardado\r\n var storedStartTime = localStorage.getItem('startTime');\r\n if (storedStartTime) {\r\n \/\/ Si ya existe un tiempo de inicio, lo usamos para calcular el tiempo restante\r\n startCountdown(parseInt(storedStartTime));\r\n } else {\r\n \/\/ Si no existe un tiempo de inicio, lo establecemos y lo guardamos en localStorage\r\n var startTime = Math.floor(Date.now() \/ 1000);\r\n localStorage.setItem('startTime', startTime);\r\n startCountdown(startTime);\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<div class=\"elementor-element elementor-element-104359a elementor-widget-mobile__width-inherit 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 Pol\u00edgonos y Ubicaci\u00f3n<\/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\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\r\n.leaflet-top.leaflet-right {\r\n top: 10px !important;\r\n}\r\n\r\n.icono-rotado {\r\n transform-origin: center;\r\n}\r\n.leaflet-control-zoom {\r\n display: none;\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"map\"><\/div>\r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n <script>\r\n \/\/ Inicializar el mapa\r\n const map = L.map('map').setView([-34.608067, -58.366564], 14);\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 \/\/ Definir pol\u00edgonos\r\n const polygons = [\r\n {\r\n coordinates: [\r\n [-34.608067316587594, -58.366563944133304],\r\n [-34.61202598778884, -58.366167190354716],\r\n [-34.61200213358874, -58.36562615869833],\r\n [-34.60808020902425, -58.36602353271081],\r\n [-34.608067316587594, -58.366563944133304]\r\n ],\r\n color: '#ff5100', \/\/ Naranja\r\n number: 1\r\n },\r\n {\r\n coordinates: [\r\n [-34.61044919407624, -58.363928569808735],\r\n [-34.6115953233288, -58.364588315409335],\r\n [-34.61166776252656, -58.364578257380956],\r\n [-34.61237654906943, -58.36452041525321],\r\n [-34.612112077185905, -58.36152547840797],\r\n [-34.610366541630235, -58.36198821543135],\r\n [-34.61044919407624, -58.363928569808735]\r\n ],\r\n color: '#50c878', \/\/ Verde\r\n number: 2\r\n },\r\n {\r\n coordinates: [\r\n [-34.607978972519696, -58.36604472089364],\r\n [-34.61048146954142, -58.36032157488205],\r\n [-34.605086733079816, -58.362044086886954],\r\n [-34.6050683204091, -58.36454955889489],\r\n [-34.60552863593495, -58.36638392232881],\r\n [-34.607978972519696, -58.36604472089364]\r\n ],\r\n color: '#87ceeb', \/\/ Azul cielo\r\n number: 3\r\n }\r\n ];\r\n\r\n \/\/ A\u00f1adir pol\u00edgonos al mapa\r\npolygons.forEach(polygon => {\r\n \/\/ Crear el pol\u00edgono en el mapa\r\n const leafletPolygon = L.polygon(polygon.coordinates, {\r\n color: polygon.color,\r\n weight: 2,\r\n opacity: 0.8,\r\n fillColor: polygon.color,\r\n fillOpacity: 0.5\r\n }).addTo(map);\r\n\r\n \/\/ Calcular el centro del pol\u00edgono\r\n const polygonCenter = leafletPolygon.getBounds().getCenter();\r\n\r\n \/\/ Crear la imagen como una etiqueta en el centro del pol\u00edgono\r\n const imageUrl = 'https:\/\/play.exploragame.com.ar\/wp-content\/uploads\/2024\/12\/Candado-cerrado.png';\r\n const image = L.divIcon({\r\n html: `<img decoding=\"async\" src=\"${imageUrl}\" style=\"width: 25px; height: 25px;\"\/>`, \/\/ Tama\u00f1o de la imagen\r\n iconSize: [25, 25], \/\/ Tama\u00f1o de la imagen\r\n iconAnchor: [12.5, 12.5], \/\/ Centrar la imagen (mitad del tama\u00f1o de la imagen)\r\n className: 'image-marker' \/\/ Clase personalizada para poder estilizar si es necesario\r\n });\r\n\r\n \/\/ Colocar la imagen sobre el centro del pol\u00edgono\r\n L.marker(polygonCenter, {\r\n icon: image\r\n }).addTo(map);\r\n});\r\n\r\n\r\n \/\/ Agregar control de ubicaci\u00f3n\r\n var iconoUbicacion = L.control({ position: 'bottomright' });\r\n\r\n iconoUbicacion.onAdd = function(map) {\r\n var div = L.DomUtil.create('div', 'custom-control');\r\n \r\n \/\/ Estilo para subir el \u00edcono\r\n div.style.marginBottom = '50px'; \/\/ Ajusta el valor seg\u00fan sea necesario\r\n \r\n \/\/ Contenido del \u00edcono con estilo existente\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 \/\/ Acci\u00f3n del clic\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 userCircle = null;\r\n\r\n \/\/ Inicializar el seguimiento de la ubicaci\u00f3n del usuario\r\n let watchID;\r\n\r\n if (navigator.geolocation) {\r\n watchID = navigator.geolocation.watchPosition(\r\n function (position) {\r\n updateUserLocation(position); \/\/ Actualizar ubicaci\u00f3n\r\n },\r\n function (error) {\r\n console.error('Error obteniendo la ubicaci\u00f3n: ', error);\r\n alert('Error obteniendo ubicaci\u00f3n: ' + error.message);\r\n },\r\n {\r\n enableHighAccuracy: true,\r\n maximumAge: 10000,\r\n timeout: 20000,\r\n }\r\n );\r\n\r\n window.addEventListener('beforeunload', () => {\r\n navigator.geolocation.clearWatch(watchID);\r\n });\r\n } else {\r\n alert('Tu navegador no soporta Geolocalizaci\u00f3n.');\r\n }\r\n\r\n \/\/ Funci\u00f3n para actualizar la ubicaci\u00f3n del usuario\r\n function updateUserLocation(position) {\r\n userLocation = [position.coords.latitude, position.coords.longitude];\r\n const heading = position.coords.heading;\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 || 0}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 || 0}deg);\r\n }\r\n\r\n if (!userCircle) {\r\n userCircle = L.circle(userLocation, {\r\n color: 'transparent',\r\n fillColor: '#004AAD',\r\n fillOpacity: 0.2,\r\n radius: 25,\r\n }).addTo(map);\r\n } else {\r\n userCircle.setLatLng(userLocation);\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para ajustar el mapa para incluir todos los pol\u00edgonos con un margen ajustado\r\nfunction fitMapToPolygons(map, polygons) {\r\n var bounds = new L.LatLngBounds();\r\n \r\n \/\/ Expandir los l\u00edmites para incluir cada pol\u00edgono\r\n polygons.forEach(function(polygon) {\r\n bounds.extend(polygon.getBounds());\r\n });\r\n\r\n \/\/ Aplicar los l\u00edmites al mapa con una opci\u00f3n de margen\r\n map.fitBounds(bounds, {\r\n padding: [50, 50] \/\/ Ajusta los valores de padding en p\u00edxeles seg\u00fan necesites\r\n });\r\n}\r\n\r\n\/\/ Llamar a la funci\u00f3n para ajustar la vista del mapa inicialmente\r\nfitMapToPolygons(map, Object.values(polygonObjects));\r\n\r\n\/\/ Bloquear el retroceso en el navegador\r\nwindow.history.pushState(null, \"\", window.location.href);\r\nwindow.onpopstate = function() {\r\n window.history.pushState(null, \"\", window.location.href);\r\n};\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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-d839ee5 e-flex e-con-boxed e-con e-parent\" data-id=\"d839ee5\" 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-28be849 elementor-widget elementor-widget-html\" data-id=\"28be849\" 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=\"es\">\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>Formulario Capit\u00e1n<\/title>\r\n <style>\r\n #captain-selection {\r\n background-color: #ff5100;\r\n color: #ffffff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 1000;\r\n width: 80%;\r\n max-width: 500px;\r\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n button {\r\n background-color: #ffffff;\r\n color: #ff5100;\r\n border: none;\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n margin-top: 10px;\r\n }\r\n\r\n #chat-widget {\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"captain-selection\">\r\n <p>\u00bfQui\u00e9n ser\u00e1 el Capit\u00e1n? <\/br> Selecciona la opci\u00f3n correspondiente:<\/p>\r\n <form id=\"captain-form\">\r\n <label>\r\n <input type=\"radio\" name=\"captain_choice\" value=\"captain\" id=\"is_captain\"> Soy el Capit\u00e1n\r\n <\/label>\r\n <br>\r\n <label>\r\n <input type=\"radio\" name=\"captain_choice\" value=\"not_captain\" id=\"not_captain\"> Ya elegimos Capit\u00e1n (no soy yo)\r\n <\/label>\r\n <br><br>\r\n <button type=\"submit\">Enviar<\/button>\r\n <\/form>\r\n<\/div>\r\n\r\n<div id=\"chat-widget\"><\/div>\r\n\r\n<script>\r\n const THREE_HOURS = 3 * 60 * 60 * 1000; \/\/ 3 horas en milisegundos\r\n\r\n \/\/ Al cargar la p\u00e1gina\r\n window.addEventListener(\"DOMContentLoaded\", function() {\r\n const captainSelection = document.getElementById(\"captain-selection\");\r\n const chatWidget = document.getElementById(\"chat-widget\");\r\n\r\n \/\/ Verifica el estado y el tiempo guardado en localStorage\r\n const savedStatus = JSON.parse(localStorage.getItem(\"captainStatus\"));\r\n const now = new Date().getTime();\r\n\r\n if (savedStatus && now - savedStatus.timestamp < THREE_HOURS) {\r\n if (savedStatus.isCaptain) {\r\n captainSelection.style.display = \"none\";\r\n chatWidget.style.display = \"block\";\r\n loadChatWidget();\r\n } else {\r\n captainSelection.style.display = \"none\";\r\n chatWidget.style.display = \"none\";\r\n }\r\n }\r\n });\r\n\r\n \/\/ Funci\u00f3n para cargar el widget de chat de Tawk.to\r\n function loadChatWidget() {\r\n const script = document.createElement(\"script\");\r\n script.type = \"text\/javascript\";\r\n script.src = \"https:\/\/embed.tawk.to\/6639414f07f59932ab3cb02f\/1ht7qe846\"; \/\/ ID de Tawk.to\r\n script.async = true;\r\n document.getElementsByTagName(\"head\")[0].appendChild(script);\r\n }\r\n\r\n \/\/ Manejo del formulario\r\n document.getElementById(\"captain-form\").addEventListener(\"submit\", function(event) {\r\n event.preventDefault();\r\n\r\n const isCaptainChecked = document.getElementById(\"is_captain\").checked;\r\n const notCaptainChecked = document.getElementById(\"not_captain\").checked;\r\n\r\n if (isCaptainChecked) {\r\n localStorage.setItem(\"captainStatus\", JSON.stringify({ isCaptain: true, timestamp: new Date().getTime() }));\r\n document.getElementById(\"captain-selection\").style.display = \"none\";\r\n document.getElementById(\"chat-widget\").style.display = \"block\";\r\n loadChatWidget();\r\n } else if (notCaptainChecked) {\r\n localStorage.setItem(\"captainStatus\", JSON.stringify({ isCaptain: false, timestamp: new Date().getTime() }));\r\n document.getElementById(\"captain-selection\").style.display = \"none\";\r\n document.getElementById(\"chat-widget\").style.display = \"none\";\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\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 Pol\u00edgonos y Ubicaci\u00f3n Formulario Capit\u00e1n \u00bfQui\u00e9n ser\u00e1 el Capit\u00e1n? Selecciona la opci\u00f3n correspondiente: Soy el Capit\u00e1n Ya elegimos Capit\u00e1n (no soy yo) Enviar<\/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":[17],"class_list":["post-9167","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/9167","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=9167"}],"version-history":[{"count":285,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/9167\/revisions"}],"predecessor-version":[{"id":9492,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/9167\/revisions\/9492"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=9167"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=9167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}