{"id":843,"date":"2026-01-29T17:28:44","date_gmt":"2026-01-29T17:28:44","guid":{"rendered":"https:\/\/maxhormigon.com\/?page_id=843"},"modified":"2026-01-29T17:37:48","modified_gmt":"2026-01-29T17:37:48","slug":"demo","status":"publish","type":"page","link":"https:\/\/maxhormigon.com\/index.php\/demo\/","title":{"rendered":"DEMO"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"843\" class=\"elementor elementor-843\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bb65357 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bb65357\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-31190c0\" data-id=\"31190c0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7df8b17 elementor-widget elementor-widget-html\" data-id=\"7df8b17\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"max-app-container\" style=\"width: 100%; min-height: 850px; position: relative; background: #e2e8f0; overflow: hidden; border: 1px solid #ccc;\">\r\n\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n    <style>\r\n        \/* ESTILOS INTERNOS DE LA APP *\/\r\n        #max-app-container { font-family: 'Segoe UI', sans-serif; }\r\n        \r\n        \/* Navegaci\u00f3n *\/\r\n        .mx-nav {\r\n            position: absolute; top: 20px; left: 50%; transform: translateX(-50%);\r\n            background: #1e293b; padding: 5px; border-radius: 50px; \r\n            display: flex; gap: 10px; z-index: 9999; box-shadow: 0 10px 25px rgba(0,0,0,0.3);\r\n        }\r\n        .mx-btn {\r\n            background: transparent; border: none; color: #94a3b8; padding: 10px 20px;\r\n            border-radius: 40px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px;\r\n            transition: 0.3s; font-size: 14px;\r\n        }\r\n        .mx-btn.active { background: #E31C25; color: white; box-shadow: 0 4px 15px rgba(227, 28, 37, 0.4); }\r\n\r\n        \/* Vistas *\/\r\n        .mx-view { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\r\n        .mx-view.active { display: block; z-index: 1; }\r\n\r\n        \/* Mapas *\/\r\n        .mx-map { width: 100%; height: 100%; }\r\n\r\n        \/* Tarjeta Cliente *\/\r\n        .mx-card {\r\n            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);\r\n            width: 90%; max-width: 400px; background: white; padding: 25px; border-radius: 20px;\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.2); z-index: 1000; text-align: center;\r\n        }\r\n\r\n        \/* Celular Chofer *\/\r\n        .mx-phone-wrap {\r\n            display: flex; justify-content: center; align-items: center; height: 100%; background: #0f172a;\r\n        }\r\n        .mx-phone {\r\n            width: 350px; height: 700px; background: black; border-radius: 45px; border: 8px solid #333;\r\n            overflow: hidden; position: relative; box-shadow: 0 30px 60px black;\r\n        }\r\n\r\n        \/* Utilidades *\/\r\n        .hidden { display: none !important; }\r\n        .mx-btn-action {\r\n            width: 100%; background: #E31C25; color: white; padding: 15px; border: none;\r\n            border-radius: 12px; font-weight: bold; font-size: 16px; margin-top: 15px; cursor: pointer;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"mx-nav\">\r\n        <button class=\"mx-btn active\" onclick=\"MaxApp.setMode('client', this)\"><i class=\"fas fa-user\"><\/i> Cliente<\/button>\r\n        <button class=\"mx-btn\" onclick=\"MaxApp.setMode('driver', this)\"><i class=\"fas fa-truck\"><\/i> Chofer<\/button>\r\n        <button class=\"mx-btn\" onclick=\"MaxApp.setMode('admin', this)\"><i class=\"fas fa-building\"><\/i> Admin<\/button>\r\n    <\/div>\r\n\r\n    <div id=\"v-client\" class=\"mx-view active\">\r\n        <div id=\"map-client\" class=\"mx-map\"><\/div>\r\n        <div class=\"mx-card\">\r\n            <h3 style=\"margin:0 0 10px 0; color:#333;\">Cotiza tu Hormig\u00f3n<\/h3>\r\n            <p id=\"step-1\" style=\"color:#666;\">Toca el mapa para ubicar tu obra.<\/p>\r\n            \r\n            <div id=\"step-2\" class=\"hidden\">\r\n                <div style=\"background:#f8f9fa; padding:15px; border-radius:10px; margin-bottom:10px; text-align:left;\">\r\n                    <small>Planta m\u00e1s cercana:<\/small><br>\r\n                    <strong style=\"color:#E31C25; font-size:18px;\">Hormigonera Quito<\/strong>\r\n                <\/div>\r\n                <div style=\"font-size:32px; font-weight:800; color:#333; margin:10px 0;\">$760<small style=\"font-size:14px; color:#999\">\/8m\u00b3<\/small><\/div>\r\n                <button class=\"mx-btn-action\" onclick=\"MaxApp.pagar()\">RESERVAR AHORA<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"v-driver\" class=\"mx-view\">\r\n        <div class=\"mx-phone-wrap\">\r\n            <div class=\"mx-phone\">\r\n                <div style=\"background:#E31C25; color:white; padding:20px; text-align:center; font-weight:bold;\">MAX DRIVER<\/div>\r\n                \r\n                <div id=\"driver-wait\" style=\"height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; color:white;\">\r\n                    <i class=\"fas fa-satellite-dish fa-3x\" style=\"color:#28a745; margin-bottom:20px;\"><\/i>\r\n                    <h3>En L\u00ednea<\/h3>\r\n                    <button onclick=\"MaxApp.simularPedido()\" style=\"margin-top:20px; background:#333; color:#aaa; border:none; padding:5px 10px; border-radius:5px; cursor:pointer;\">(Simular Pedido)<\/button>\r\n                <\/div>\r\n\r\n                <div id=\"driver-active\" class=\"hidden\" style=\"height:100%; position:relative;\">\r\n                    <div id=\"map-driver\" style=\"width:100%; height:85%;\"><\/div>\r\n                    <button onclick=\"MaxApp.iniciarRuta()\" style=\"width:100%; height:15%; background:#28a745; color:white; border:none; font-weight:bold; font-size:18px; cursor:pointer;\">INICIAR RUTA<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"v-admin\" class=\"mx-view\" style=\"background:white;\">\r\n        <div style=\"position:absolute; top:80px; left:20px; z-index:999; background:white; padding:20px; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,0.1);\">\r\n            <h4 style=\"margin:0;\">Dashboard<\/h4>\r\n            <div id=\"admin-log\" style=\"font-family:monospace; font-size:12px; color:#666; margin-top:10px;\">Esperando actividad...<\/div>\r\n        <\/div>\r\n        <div id=\"map-admin\" class=\"mx-map\"><\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Namespacing para evitar conflictos con WordPress\r\n        var MaxApp = {\r\n            maps: {},\r\n            order: null,\r\n            truck: null,\r\n\r\n            init: function() {\r\n                \/\/ Verificar si Leaflet carg\u00f3\r\n                if (typeof L === 'undefined') {\r\n                    setTimeout(MaxApp.init, 500); \/\/ Reintentar si no carg\u00f3\r\n                    return;\r\n                }\r\n\r\n                \/\/ Config Maps\r\n                var tiles = 'https:\/\/{s}.basemaps.cartocdn.com\/light_all\/{z}\/{x}\/{y}{r}.png';\r\n                var quito = [-0.1807, -78.4678];\r\n\r\n                \/\/ Crear Mapas\r\n                MaxApp.maps.client = L.map('map-client').setView(quito, 12);\r\n                L.tileLayer(tiles).addTo(MaxApp.maps.client);\r\n                MaxApp.maps.client.on('click', MaxApp.onMapClick);\r\n\r\n                MaxApp.maps.admin = L.map('map-admin').setView(quito, 12);\r\n                L.tileLayer(tiles).addTo(MaxApp.maps.admin);\r\n\r\n                MaxApp.maps.driver = L.map('map-driver', {zoomControl:false}).setView(quito, 12);\r\n                L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png').addTo(MaxApp.maps.driver);\r\n\r\n                \/\/ Agregar Plantas\r\n                var plants = [\r\n                    {lat: -0.1422, lng: -78.4752, name: 'Hormigonera Quito'},\r\n                    {lat: -0.2635, lng: -78.5369, name: 'Holcim Sur'}\r\n                ];\r\n                \r\n                var iconFactory = L.divIcon({html: '<i class=\"fas fa-industry fa-2x\" style=\"color:#004085;\"><\/i>', className: 'dummy'});\r\n\r\n                plants.forEach(function(p) {\r\n                    L.marker([p.lat, p.lng], {icon: iconFactory}).addTo(MaxApp.maps.client);\r\n                    L.marker([p.lat, p.lng], {icon: iconFactory}).addTo(MaxApp.maps.admin).bindPopup(p.name);\r\n                });\r\n\r\n                \/\/ Forzar redibujado\r\n                setTimeout(function(){ \r\n                    MaxApp.maps.client.invalidateSize(); \r\n                }, 1000);\r\n            },\r\n\r\n            onMapClick: function(e) {\r\n                \/\/ Limpiar anterior\r\n                if(MaxApp.order) MaxApp.maps.client.removeLayer(MaxApp.order);\r\n\r\n                var iconUser = L.divIcon({html: '<i class=\"fas fa-map-marker-alt fa-3x\" style=\"color:#E31C25;\"><\/i>', className: 'dummy', iconAnchor:[15,40]});\r\n                MaxApp.order = L.marker(e.latlng, {icon: iconUser}).addTo(MaxApp.maps.client);\r\n                \r\n                \/\/ Mostrar UI\r\n                document.getElementById('step-1').style.display = 'none';\r\n                document.getElementById('step-2').classList.remove('hidden');\r\n            },\r\n\r\n            setMode: function(mode, btn) {\r\n                \/\/ UI Switch\r\n                document.querySelectorAll('.mx-view').forEach(function(el) { el.classList.remove('active'); });\r\n                document.getElementById('v-' + mode).classList.add('active');\r\n                \r\n                document.querySelectorAll('.mx-btn').forEach(function(el) { el.classList.remove('active'); });\r\n                if(btn) btn.classList.add('active');\r\n\r\n                \/\/ Map Refresc\r\n                setTimeout(function() {\r\n                    if(MaxApp.maps.client) MaxApp.maps.client.invalidateSize();\r\n                    if(MaxApp.maps.admin) MaxApp.maps.admin.invalidateSize();\r\n                    if(MaxApp.maps.driver) MaxApp.maps.driver.invalidateSize();\r\n                }, 200);\r\n            },\r\n\r\n            pagar: function() {\r\n                var btn = document.querySelector('.mx-btn-action');\r\n                btn.innerText = \"Procesando...\";\r\n                setTimeout(function() {\r\n                    alert(\"\u2705 Pago Aprobado. Buscando chofer...\");\r\n                    \/\/ Cambiar a chofer\r\n                    MaxApp.setMode('driver', document.querySelectorAll('.mx-btn')[1]);\r\n                    MaxApp.simularPedido();\r\n                }, 1000);\r\n            },\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cliente Chofer Admin Cotiza tu Hormig\u00f3n Toca el mapa para ubicar tu obra. Planta m\u00e1s cercana: Hormigonera Quito $760\/8m\u00b3 RESERVAR AHORA MAX DRIVER En L\u00ednea (Simular Pedido) INICIAR RUTA Dashboard Esperando actividad&#8230; \/\/ Namespacing para evitar conflictos con WordPress var MaxApp = { maps: {}, order: null, truck: null, init: function() { \/\/ Verificar si [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages\/843"}],"collection":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/comments?post=843"}],"version-history":[{"count":14,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages\/843\/revisions"}],"predecessor-version":[{"id":858,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages\/843\/revisions\/858"}],"wp:attachment":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/media?parent=843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}