{"id":8515,"date":"2024-11-30T19:51:50","date_gmt":"2024-11-30T19:51:50","guid":{"rendered":"https:\/\/play.exploragame.com.ar\/?page_id=8515"},"modified":"2024-12-03T18:43:43","modified_gmt":"2024-12-03T18:43:43","slug":"chequeo-ubicacion","status":"publish","type":"page","link":"https:\/\/play.exploragame.com.ar\/index.php\/chequeo-ubicacion\/","title":{"rendered":"Chequeo ubicacion"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8515\" class=\"elementor elementor-8515\" data-elementor-post-type=\"page\">\n\t\t\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-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>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 {\r\n            margin: 0;\r\n            font-family: Arial, sans-serif;\r\n        }\r\n\r\n        #map {\r\n            width: 100%;\r\n            height: 600px;\r\n        }\r\n\r\n        .alert-box {\r\n            position: fixed;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            background-color: #ff5100;\r\n            color: white;\r\n            padding: 20px;\r\n            border-radius: 10px 10px 0 0;\r\n            text-align: center;\r\n            z-index: 1000;\r\n            font-size: 18px; \/* Tama\u00f1o m\u00e1s grande *\/\r\n        }\r\n\r\n        .alert-box button {\r\n            margin-top: 10px;\r\n            padding: 10px 20px;\r\n            background-color: white;\r\n            color: #ff5100;\r\n            border: none;\r\n            border-radius: 5px;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n        }\r\n\r\n        .center-alert {\r\n            position: fixed;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            background-color: #ff5100;\r\n            color: white;\r\n            padding: 20px;\r\n            border-radius: 10px;\r\n            text-align: center;\r\n            z-index: 1000;\r\n            font-size: 20px; \/* Tama\u00f1o m\u00e1s grande *\/\r\n        }\r\n\r\n        .center-alert button {\r\n            margin-top: 10px;\r\n            padding: 10px 20px;\r\n            background-color: white;\r\n            color: #ff5100;\r\n            border: none;\r\n            border-radius: 5px;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n        }\r\n\r\n        #location-button {\r\n            position: absolute;\r\n            top: 10px;\r\n            right: 10px;\r\n            width: 30px;\r\n            height: 30px;\r\n            background-color: white;\r\n            border-radius: 5px;\r\n            background-image: url('https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/current-location-icon-1.png');\r\n            background-size: cover;\r\n            background-position: center;\r\n            cursor: pointer;\r\n            z-index: 1000;\r\n        }\r\n        \r\n        .waiting-alert {\r\n    position: fixed;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background-color: #ff5100;\r\n    color: white;\r\n    padding: 20px;\r\n    border-radius: 10px;\r\n    text-align: center;\r\n    z-index: 1000;\r\n    font-size: 20px;\r\n    animation: blink 1s step-end infinite;\r\n}\r\n\r\n@keyframes blink {\r\n    50% {\r\n        opacity: 0;\r\n    }\r\n}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div id=\"map\"><\/div>\r\n    <div id=\"location-button\" onclick=\"centerOnUser()\"><\/div>\r\n\r\n    <div class=\"alert-box\" id=\"alert1\" style=\"display: none;\">\r\n        <p>\u00bfVes tu ubicaci\u00f3n?<\/p>\r\n        <button onclick=\"handleInitialResponse(true)\">S\u00ed<\/button>\r\n        <button onclick=\"handleInitialResponse(false)\">No<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"alert-box\" id=\"alert2\" style=\"display: none;\">\r\n        <p>Para continuar, chequea que tienes activada la ubicaci\u00f3n en ajustes y da permiso a la aplicaci\u00f3n.<\/p>\r\n        <img decoding=\"async\" src=\"https:\/\/play.exploragame.com.ar\/wp-content\/uploads\/2024\/11\/Diseno-sin-titulo-2.png\" alt=\"Ubicaci\u00f3n\">\r\n        <button onclick=\"checkLocationAgain()\">Continuar<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"alert-box\" id=\"alert3\" style=\"display: none;\">\r\n        <p>\u00bfY ahora ves tu ubicaci\u00f3n?<\/p>\r\n        <button onclick=\"handleFinalResponse(true)\">S\u00ed<\/button>\r\n        <button onclick=\"handleFinalResponse(false)\">No<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"center-alert\" id=\"alert4\" style=\"display: none;\">\r\n    <p>AVISAR AL COORDINADOR<\/p>\r\n    <button id=\"reloadButton\">Ya le avis\u00e9<\/button>\r\n<\/div>\r\n    \r\n    <div class=\"alert-box\" id=\"alert-location\" style=\"display: none;\">\r\n    <p>Para continuar activa la ubicaci\u00f3n.<\/p>\r\n    <button onclick=\"reloadPage()\">Continuar<\/button>\r\n<\/div>\r\n\r\n<div class=\"waiting-alert\" id=\"waiting-alert\" style=\"display: none;\">\r\n    <p>Esperando ubicaci\u00f3n...<\/p>\r\n<\/div>\r\n\r\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n    <script>\r\n        const destinationUrl = \"https:\/\/www.tu-url-destino.com\";\r\n\r\n        let map, userMarker, userCircle;\r\n\r\n        function initializeMap(lat, lng) {\r\n            map = L.map('map').setView([lat, lng], 18);\r\n            L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}{r}.png', {\r\n                maxZoom: 19,\r\n                attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors &copy; <a href=\"https:\/\/carto.com\/attributions\">CARTO<\/a>'\r\n            }).addTo(map);\r\n\r\n            userMarker = L.marker([lat, lng], {\r\n                icon: L.icon({\r\n                    iconUrl: 'https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Diseno-sin-titulo-2024-06-20T162631.805.png',\r\n                    iconSize: [30, 30]\r\n                })\r\n            }).addTo(map);\r\n\r\n            userCircle = L.circle([lat, lng], {\r\n                radius: 25,\r\n                color: 'transparent', \/\/ Borde transparente\r\n                fillColor: '#004AAD',\r\n                fillOpacity: 0.2\r\n            }).addTo(map);\r\n        }\r\n\r\n        function centerOnUser() {\r\n            if (userMarker && userCircle) {\r\n                map.setView(userMarker.getLatLng(), 18);\r\n            }\r\n        }\r\n\r\n        function getUserLocation() {\r\n            if (!navigator.geolocation) {\r\n                alert('La geolocalizaci\u00f3n no es compatible con este navegador.');\r\n                return;\r\n            }\r\n            navigator.geolocation.getCurrentPosition(\r\n                position => {\r\n                    const lat = position.coords.latitude;\r\n                    const lng = position.coords.longitude;\r\n                    initializeMap(lat, lng);\r\n                    document.getElementById('alert1').style.display = 'block';\r\n                },\r\n                () => alert('No se pudo obtener la ubicaci\u00f3n.')\r\n            );\r\n        }\r\n\r\n        function handleInitialResponse(isYes) {\r\n            document.getElementById('alert1').style.display = 'none';\r\n            if (isYes) {\r\n                redirectToDestination();\r\n            } else {\r\n                document.getElementById('alert2').style.display = 'block';\r\n            }\r\n        }\r\n\r\n        function checkLocationAgain() {\r\n            document.getElementById('alert2').style.display = 'none';\r\n            document.getElementById('alert3').style.display = 'block';\r\n        }\r\n\r\n        function handleFinalResponse(isYes) {\r\n            document.getElementById('alert3').style.display = 'none';\r\n            if (isYes) {\r\n                redirectToDestination();\r\n            } else {\r\n                document.getElementById('alert4').style.display = 'block';\r\n            }\r\n        }\r\n\r\n        function redirectToDestination() {\r\n            window.location.href = destinationUrl;\r\n        }\r\n\r\n        window.onload = getUserLocation;\r\n        \r\n    \r\n\r\n\/\/ Esta funci\u00f3n verifica si la geolocalizaci\u00f3n est\u00e1 disponible\r\n    function checkLocationStatus() {\r\n        if (!navigator.geolocation) {\r\n            alert('La geolocalizaci\u00f3n no es compatible con este navegador.');\r\n            return;\r\n        }\r\n        \r\n        navigator.geolocation.getCurrentPosition(\r\n            position => {\r\n                const lat = position.coords.latitude;\r\n                const lng = position.coords.longitude;\r\n                initializeMap(lat, lng); \/\/ Si la geolocalizaci\u00f3n est\u00e1 activada, carga el mapa con la ubicaci\u00f3n del usuario\r\n                \r\n                \/\/ Aqu\u00ed verificamos si los otros alertas deben mostrarse\r\n                document.getElementById('alert1').style.display = 'block'; \/\/ Llamamos a la alerta que deseas mostrar\r\n            },\r\n            () => {\r\n                \/\/ Si la ubicaci\u00f3n no est\u00e1 disponible o no se otorgan permisos\r\n                document.getElementById('alert-location').style.display = 'block'; \/\/ Mostramos la alerta de ubicaci\u00f3n\r\n            }\r\n        );\r\n    }\r\n\r\n    \/\/ Funci\u00f3n para recargar la p\u00e1gina\r\n    function reloadPage() {\r\n        location.reload(); \/\/ Recarga la p\u00e1gina\r\n    }\r\n\r\n    \/\/ Llamar a la funci\u00f3n para verificar la ubicaci\u00f3n al cargar la p\u00e1gina\r\n    window.onload = checkLocationStatus;\r\n    \r\n    function setupReloadButton() {\r\n        \/\/ Obtener el bot\u00f3n por su ID\r\n        const reloadButton = document.querySelector('#reloadButton');\r\n        \r\n        \/\/ A\u00f1adir el evento click al bot\u00f3n\r\n        reloadButton.addEventListener('click', function() {\r\n            location.reload(); \/\/ Recarga la p\u00e1gina cuando se hace clic en el bot\u00f3n \"Ya le avis\u00e9\"\r\n        });\r\n    }\r\n\r\n    \/\/ Funci\u00f3n para obtener la ubicaci\u00f3n del usuario\r\n    function getUserLocation() {\r\n        if (!navigator.geolocation) {\r\n            alert('La geolocalizaci\u00f3n no es compatible con este navegador.');\r\n            return;\r\n        }\r\n        \r\n        navigator.geolocation.getCurrentPosition(\r\n            position => {\r\n                const lat = position.coords.latitude;\r\n                const lng = position.coords.longitude;\r\n                initializeMap(lat, lng); \/\/ Aqu\u00ed inicializamos el mapa con la ubicaci\u00f3n del usuario\r\n                \r\n                document.getElementById('alert1').style.display = 'block'; \/\/ Mostrar alerta 1 si la ubicaci\u00f3n est\u00e1 disponible\r\n            },\r\n            () => {\r\n                document.getElementById('alert-location').style.display = 'block'; \/\/ Si no se obtiene la ubicaci\u00f3n, mostrar la alerta de ubicaci\u00f3n\r\n            }\r\n        );\r\n    }\r\n\r\n    \/\/ Llamar a la funci\u00f3n para inicializar los elementos cuando la p\u00e1gina cargue\r\n    window.onload = function() {\r\n        getUserLocation();  \/\/ Obtener la ubicaci\u00f3n\r\n        setupReloadButton(); \/\/ Configurar el bot\u00f3n de recarga\r\n    };\r\n \r\n \r\n \r\n \r\n<\/script>\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ubicaci\u00f3n \u00bfVes tu ubicaci\u00f3n? S\u00ed No Para continuar, chequea que tienes activada la ubicaci\u00f3n en ajustes y da permiso a la aplicaci\u00f3n. Continuar \u00bfY ahora ves tu ubicaci\u00f3n? S\u00ed No AVISAR AL COORDINADOR Ya le avis\u00e9 Para continuar activa la ubicaci\u00f3n. Continuar Esperando ubicaci\u00f3n&#8230;<\/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":[15],"class_list":["post-8515","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/8515","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=8515"}],"version-history":[{"count":229,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/8515\/revisions"}],"predecessor-version":[{"id":8752,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/8515\/revisions\/8752"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=8515"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=8515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}