Datalyst Tracking Premium Demo<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\"\/>\n\n<style>\n\n\/* =========================================================\n ULTRA PREMIUM DATALYST TRACKING DASHBOARD\n========================================================= *\/\n\n:root{\n --bg:#030712;\n --panel:#0f172a;\n --panel2:#111827;\n --card:#16213a;\n --glass:rgba(255,255,255,0.05);\n --border:rgba(255,255,255,0.08);\n\n --text:#f8fafc;\n --muted:#94a3b8;\n\n --blue:#2563eb;\n --cyan:#06b6d4;\n --green:#22c55e;\n --orange:#f59e0b;\n --red:#ef4444;\n}\n\n\/* RESET *\/\n\n*{\n margin:0;\n padding:0;\n box-sizing:border-box;\n}\n\nhtml,body{\n width:100%;\n height:100%;\n overflow:hidden;\n background:var(--bg);\n font-family:Arial,sans-serif;\n color:var(--text);\n}\n\n\/* =========================================================\n GLOBAL BACKGROUND\n========================================================= *\/\n\nbody::before{\n content:\"\";\n position:fixed;\n top:-20%;\n right:-10%;\n width:900px;\n height:900px;\n\n background:\n radial-gradient(\n circle,\n rgba(37,99,235,0.22),\n transparent 70%\n );\n\n filter:blur(80px);\n\n z-index:0;\n pointer-events:none;\n}\n\nbody::after{\n content:\"\";\n position:fixed;\n bottom:-25%;\n left:-15%;\n width:700px;\n height:700px;\n\n background:\n radial-gradient(\n circle,\n rgba(6,182,212,0.14),\n transparent 70%\n );\n\n filter:blur(90px);\n\n z-index:0;\n pointer-events:none;\n}\n\n\/* =========================================================\n TOPBAR\n========================================================= *\/\n\n.topbar{\n position:relative;\n z-index:1000;\n\n height:78px;\n\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.92),\n rgba(15,23,42,0.82)\n );\n\n backdrop-filter:blur(18px);\n\n border-bottom:1px solid rgba(255,255,255,0.08);\n\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n padding:0 28px;\n}\n\n\/* BRAND *\/\n\n.brand{\n display:flex;\n align-items:center;\n gap:16px;\n}\n\n.logo{\n width:52px;\n height:52px;\n\n border-radius:18px;\n\n background:\n linear-gradient(\n 135deg,\n #2563eb,\n #06b6d4\n );\n\n display:flex;\n align-items:center;\n justify-content:center;\n\n font-size:22px;\n font-weight:900;\n\n color:white;\n\n box-shadow:\n 0 10px 30px rgba(37,99,235,0.45),\n inset 0 1px 1px rgba(255,255,255,0.25);\n}\n\n.brand h1{\n font-size:24px;\n font-weight:800;\n letter-spacing:1px;\n}\n\n.brand p{\n color:var(--muted);\n font-size:13px;\n margin-top:4px;\n}\n\n\/* LIVE *\/\n\n.live{\n display:flex;\n align-items:center;\n gap:10px;\n\n padding:10px 18px;\n\n border-radius:50px;\n\n background:rgba(34,197,94,0.10);\n\n border:1px solid rgba(34,197,94,0.22);\n\n color:#4ade80;\n\n font-size:13px;\n font-weight:700;\n\n letter-spacing:1px;\n\n backdrop-filter:blur(10px);\n}\n\n.live::before{\n content:\"\";\n width:10px;\n height:10px;\n border-radius:50%;\n background:#4ade80;\n\n box-shadow:\n 0 0 12px #4ade80,\n 0 0 22px #4ade80;\n}\n\n\/* =========================================================\n DASHBOARD GRID\n========================================================= *\/\n\n.dashboard{\n position:relative;\n z-index:2;\n\n display:grid;\n\n grid-template-columns:\n 340px\n 1fr\n 340px;\n\n height:calc(100vh - 78px);\n}\n\n\/* =========================================================\n SIDEBAR\n========================================================= *\/\n\n.sidebar{\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.96),\n rgba(17,24,39,0.96)\n );\n\n border-right:1px solid rgba(255,255,255,0.06);\n\n overflow:auto;\n\n padding:22px;\n}\n\n\/* TITLE *\/\n\n.sidebar h2{\n font-size:22px;\n font-weight:800;\n margin-bottom:18px;\n}\n\n\/* SEARCH *\/\n\n.search{\n width:100%;\n height:52px;\n\n border:none;\n outline:none;\n\n border-radius:18px;\n\n background:rgba(255,255,255,0.04);\n\n border:1px solid rgba(255,255,255,0.06);\n\n padding:0 18px;\n\n color:white;\n\n margin-bottom:20px;\n\n font-size:14px;\n\n backdrop-filter:blur(10px);\n}\n\n.search::placeholder{\n color:#64748b;\n}\n\n\/* =========================================================\n VEHICLE CARD\n========================================================= *\/\n\n.vehicle{\n position:relative;\n\n background:\n linear-gradient(\n 180deg,\n rgba(22,33,58,0.96),\n rgba(17,28,49,0.96)\n );\n\n border:1px solid rgba(255,255,255,0.06);\n\n border-radius:24px;\n\n padding:18px;\n\n margin-bottom:16px;\n\n overflow:hidden;\n\n transition:.35s ease;\n}\n\n\/* CARD LIGHT *\/\n\n.vehicle::before{\n content:\"\";\n position:absolute;\n top:-30%;\n right:-20%;\n\n width:180px;\n height:180px;\n\n background:\n radial-gradient(\n circle,\n rgba(37,99,235,0.16),\n transparent 70%\n );\n\n filter:blur(30px);\n}\n\n\/* HOVER *\/\n\n.vehicle:hover{\n transform:\n translateY(-6px)\n scale(1.01);\n\n border-color:rgba(37,99,235,0.28);\n\n box-shadow:\n 0 20px 40px rgba(0,0,0,0.28);\n}\n\n\/* TOP *\/\n\n.vehicle-top{\n display:flex;\n align-items:center;\n justify-content:space-between;\n}\n\n.vehicle-left{\n display:flex;\n align-items:center;\n gap:14px;\n}\n\n\/* ICON *\/\n\n.vehicle-icon{\n width:54px;\n height:54px;\n\n border-radius:18px;\n\n background:\n linear-gradient(\n 135deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.02)\n );\n\n display:flex;\n align-items:center;\n justify-content:center;\n\n font-size:28px;\n\n border:1px solid rgba(255,255,255,0.06);\n\n backdrop-filter:blur(10px);\n}\n\n\/* NAME *\/\n\n.vehicle-name{\n font-size:15px;\n font-weight:700;\n}\n\n.vehicle-type{\n margin-top:4px;\n font-size:12px;\n color:var(--muted);\n}\n\n\/* STATS *\/\n\n.vehicle-stats{\n display:flex;\n justify-content:space-between;\n\n margin-top:18px;\n\n font-size:13px;\n color:var(--muted);\n}\n\n\/* STATUS *\/\n\n.status{\n width:12px;\n height:12px;\n border-radius:50%;\n}\n\n.green{\n background:var(--green);\n box-shadow:\n 0 0 10px var(--green),\n 0 0 20px var(--green);\n}\n\n.orange{\n background:var(--orange);\n box-shadow:\n 0 0 10px var(--orange),\n 0 0 20px var(--orange);\n}\n\n.red{\n background:var(--red);\n box-shadow:\n 0 0 10px var(--red),\n 0 0 20px var(--red);\n}\n\n\/* =========================================================\n MAP AREA\n========================================================= *\/\n\n.map-wrapper{\n position:relative;\n overflow:hidden;\n}\n\n#map{\n width:100%;\n height:100%;\n}\n\n\/* =========================================================\n FLOATING STATS\n========================================================= *\/\n\n.overlay{\n position:absolute;\n top:18px;\n left:18px;\n\n z-index:999;\n\n display:flex;\n gap:16px;\n flex-wrap:wrap;\n}\n\n\/* STAT *\/\n\n.stat{\n min-width:140px;\n\n padding:18px 20px;\n\n border-radius:24px;\n\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.86),\n rgba(15,23,42,0.76)\n );\n\n border:1px solid rgba(255,255,255,0.08);\n\n backdrop-filter:blur(18px);\n\n box-shadow:\n 0 10px 30px rgba(0,0,0,0.28);\n}\n\n.stat h4{\n font-size:12px;\n color:var(--muted);\n margin-bottom:10px;\n text-transform:uppercase;\n letter-spacing:1px;\n}\n\n.stat strong{\n font-size:28px;\n font-weight:800;\n}\n\n\/* =========================================================\n FEED\n========================================================= *\/\n\n.feed{\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.96),\n rgba(17,24,39,0.96)\n );\n\n border-left:1px solid rgba(255,255,255,0.06);\n\n overflow:auto;\n\n padding:22px;\n}\n\n.feed h2{\n font-size:22px;\n font-weight:800;\n margin-bottom:18px;\n}\n\n\/* ACTIVITY *\/\n\n.activity{\n position:relative;\n\n background:\n linear-gradient(\n 180deg,\n rgba(22,33,58,0.96),\n rgba(17,28,49,0.96)\n );\n\n border:1px solid rgba(255,255,255,0.06);\n\n border-radius:22px;\n\n padding:18px;\n\n margin-bottom:16px;\n\n transition:.35s ease;\n\n overflow:hidden;\n}\n\n\/* LIGHT *\/\n\n.activity::before{\n content:\"\";\n position:absolute;\n top:-40%;\n right:-20%;\n\n width:180px;\n height:180px;\n\n background:\n radial-gradient(\n circle,\n rgba(37,99,235,0.12),\n transparent 70%\n );\n\n filter:blur(30px);\n}\n\n\/* HOVER *\/\n\n.activity:hover{\n transform:translateY(-4px);\n\n border-color:rgba(37,99,235,0.22);\n}\n\n\/* TEXT *\/\n\n.activity-title{\n font-size:15px;\n font-weight:700;\n margin-bottom:10px;\n}\n\n.activity-time{\n font-size:13px;\n color:var(--muted);\n}\n\n\/* =========================================================\n LEAFLET PREMIUM FIX\n========================================================= *\/\n\n.leaflet-control-container{\n display:none !important;\n}\n\n.leaflet-popup-content-wrapper{\n background:#0f172a;\n color:white;\n border-radius:20px;\n border:1px solid rgba(255,255,255,0.08);\n}\n\n.leaflet-popup-tip{\n background:#0f172a;\n}\n\n\/* =========================================================\n SCROLLBAR\n========================================================= *\/\n\n::-webkit-scrollbar{\n width:8px;\n}\n\n::-webkit-scrollbar-thumb{\n background:#1e293b;\n border-radius:20px;\n}\n\n\/* =========================================================\n MOBILE\n========================================================= *\/\n\n@media(max-width:950px){\n\n html,body{\n overflow:auto;\n }\n\n .dashboard{\n display:flex;\n flex-direction:column;\n height:auto;\n }\n\n .sidebar{\n width:100%;\n height:320px;\n border-right:none;\n border-bottom:1px solid rgba(255,255,255,0.06);\n }\n\n .map-wrapper{\n height:70vh;\n min-height:500px;\n }\n\n .feed{\n border-left:none;\n border-top:1px solid rgba(255,255,255,0.06);\n }\n\n .overlay{\n top:14px;\n left:14px;\n right:14px;\n }\n\n .stat{\n flex:1;\n min-width:100px;\n }\n\n .brand h1{\n font-size:18px;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n\n\n<div class=\"topbar\">\n\n <div class=\"brand\">\n\n <div class=\"logo\">D<\/div>\n\n <div>\n <h1>DATALYST TRACKING<\/h1>\n <p>Fleet Monitoring<\/p>\n <\/div>\n\n <\/div>\n\n <div class=\"live\">\n LIVE\n <\/div>\n\n<\/div>\n\n\n\n<div class=\"dashboard\">\n\n \n\n <div class=\"sidebar\">\n\n <h2>Devices<\/h2>\n\n <input class=\"search\" placeholder=\"Search devices...\">\n\n <div id=\"deviceList\"><\/div>\n\n <\/div>\n\n \n\n <div class=\"map-wrapper\">\n\n <div class=\"overlay\">\n\n <div class=\"stat\">\n <h4>Online<\/h4>\n <strong>28<\/strong>\n <\/div>\n\n <div class=\"stat\">\n <h4>Moving<\/h4>\n <strong>16<\/strong>\n <\/div>\n\n <div class=\"stat\">\n <h4>Alerts<\/h4>\n <strong>4<\/strong>\n <\/div>\n\n <\/div>\n\n <div id=\"map\"><\/div>\n\n <\/div>\n\n \n\n <div class=\"feed\">\n\n <h2>Activity<\/h2>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Truck Alpha moving through Harare<\/div>\n <div class=\"activity-time\">2 mins ago<\/div>\n <\/div>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Toyota Hilux speeding detected<\/div>\n <div class=\"activity-time\">5 mins ago<\/div>\n <\/div>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Van 07 engine switched off<\/div>\n <div class=\"activity-time\">8 mins ago<\/div>\n <\/div>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Generator Unit battery warning<\/div>\n <div class=\"activity-time\">12 mins ago<\/div>\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n\n<script>\n\n\/* =========================\n MAP\n========================= *\/\n\nconst map = L.map('map',{\n zoomControl:false\n}).setView([-17.8252, 31.0335], 7);\n\nL.tileLayer(\n'https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png',\n{\n attribution:'\u00a9 OpenStreetMap \u00a9 CARTO'\n}).addTo(map);\n\nfunction getEmoji(type){\n\n switch(type){\n\n case \"Truck\": return \"\ud83d\ude9b\";\n case \"Van\": return \"\ud83d\ude90\";\n case \"Pickup\": return \"\ud83d\udefb\";\n case \"Bus\": return \"\ud83d\ude8c\";\n case \"Bike\": return \"\ud83c\udfcd\ufe0f\";\n case \"Laptop\": return \"\ud83d\udcbb\";\n case \"Generator\": return \"\u26a1\";\n case \"TV\": return \"\ud83d\udcfa\";\n case \"SUV\": return \"\ud83d\ude97\";\n\n default:\n return \"\ud83d\udccd\";\n }\n}\n\nfunction createIcon(type,color){\n\n const emoji = getEmoji(type);\n\n return L.divIcon({\n\n className:'',\n\n iconSize:[58,58],\n\n iconAnchor:[29,29],\n\n html:`\n\n <div style=\"\n width:58px;\n height:58px;\n position:relative;\n \">\n\n <div style=\"\n position:absolute;\n inset:0;\n background:${color};\n opacity:.22;\n border-radius:50%;\n filter:blur(12px);\n \"><\/div>\n\n <div style=\"\n width:58px;\n height:58px;\n border-radius:18px;\n\n background:\n linear-gradient(\n 180deg,\n #16213a,\n #0f172a\n );\n\n border:2px solid ${color};\n\n display:flex;\n align-items:center;\n justify-content:center;\n\n font-size:28px;\n\n position:relative;\n z-index:2;\n\n box-shadow:\n 0 10px 25px rgba(0,0,0,0.35);\n \">\n ${emoji}\n <\/div>\n\n <div style=\"\n width:12px;\n height:12px;\n border-radius:50%;\n\n background:${color};\n\n border:2px solid white;\n\n position:absolute;\n right:2px;\n bottom:2px;\n\n z-index:3;\n \"><\/div>\n\n <\/div>\n `\n });\n}\n\n\/* =========================\n DEVICES\n========================= *\/\n\nconst vehicles = [\n\n{name:\"Truck Alpha\", type:\"Truck\", lat:-17.82, lng:31.03, speed:68, status:\"moving\"},\n{name:\"Truck Bravo\", type:\"Truck\", lat:-18.01, lng:30.88, speed:54, status:\"moving\"},\n{name:\"Van 07\", type:\"Van\", lat:-17.67, lng:30.95, speed:0, status:\"offline\"},\n{name:\"Toyota Hilux\", type:\"Pickup\", lat:-17.91, lng:31.21, speed:92, status:\"warning\"},\n{name:\"Fuel Tanker\", type:\"Truck\", lat:-18.25, lng:30.44, speed:44, status:\"moving\"},\n{name:\"School Bus\", type:\"Bus\", lat:-17.52, lng:31.54, speed:33, status:\"moving\"},\n{name:\"Generator Unit\", type:\"Generator\", lat:-19.02, lng:30.85, speed:0, status:\"offline\"},\n{name:\"Courier Bike\", type:\"Bike\", lat:-17.30, lng:30.67, speed:70, status:\"moving\"},\n{name:\"Laptop Tracker\", type:\"Laptop\", lat:-18.15, lng:31.42, speed:0, status:\"warning\"},\n{name:\"Security Car\", type:\"SUV\", lat:-17.98, lng:32.10, speed:48, status:\"moving\"},\n{name:\"Office TV\", type:\"TV\", lat:-18.20, lng:31.90, speed:0, status:\"offline\"},\n{name:\"Delivery Van\", type:\"Van\", lat:-17.74, lng:30.40, speed:57, status:\"moving\"}\n\n];\n\nconst deviceList = document.getElementById(\"deviceList\");\n\nvehicles.forEach(v=>{\n\n let color =\n v.status === \"moving\"\n ? \"#22c55e\"\n : v.status === \"warning\"\n ? \"#f59e0b\"\n : \"#ef4444\";\n\n let dot =\n v.status === \"moving\"\n ? \"green\"\n : v.status === \"warning\"\n ? \"orange\"\n : \"red\";\n\n const emoji = getEmoji(v.type);\n\n deviceList.innerHTML += `\n\n <div class=\"vehicle\">\n\n <div class=\"vehicle-top\">\n\n <div class=\"vehicle-left\">\n\n <div class=\"vehicle-icon\">\n ${emoji}\n <\/div>\n\n <div>\n <div class=\"vehicle-name\">${v.name}<\/div>\n <div class=\"vehicle-type\">${v.type}<\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"status ${dot}\"><\/div>\n\n <\/div>\n\n <div class=\"vehicle-stats\">\n <span>${v.speed} km\/h<\/span>\n <span>${v.status}<\/span>\n <\/div>\n\n <\/div>\n\n `;\n\n v.marker = L.marker(\n [v.lat,v.lng],\n {\n icon:createIcon(v.type,color)\n }\n ).addTo(map);\n\n v.marker.bindPopup(`\n\n <div style=\"min-width:180px;\">\n\n <div style=\"font-size:28px;margin-bottom:10px;\">\n ${emoji}\n <\/div>\n\n <strong style=\"font-size:16px;\">\n ${v.name}\n <\/strong>\n\n <br><br>\n\n Type: ${v.type}<br>\n Speed: ${v.speed} km\/h<br>\n Status: ${v.status}\n\n <\/div>\n\n `);\n\n});\n\n\/* =========================\n LIVE MOVEMENT\n========================= *\/\n\nsetInterval(()=>{\n\n vehicles.forEach(v=>{\n\n if(v.status === \"offline\") return;\n\n v.lat += (Math.random() - 0.5) * 0.03;\n v.lng += (Math.random() - 0.5) * 0.03;\n\n v.marker.setLatLng([v.lat,v.lng]);\n\n });\n\n},2500);\n\n\/* =========================\n MOBILE FIX\n========================= *\/\n\nwindow.addEventListener(\"resize\",()=>{\n\n setTimeout(()=>{\n\n map.invalidateSize();\n\n },300);\n\n});\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Datalyst Tracking Premium Demo D DATALYST TRACKING Fleet Monitoring LIVE Devices Online 28 Moving 16 Alerts 4 Activity Truck Alpha moving through Harare 2 mins ago Toyota Hilux speeding detected 5 mins ago Van 07 engine switched off 8 mins ago Generator Unit battery warning 12 mins ago<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-701","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=701"}],"version-history":[{"count":19,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages\/701\/revisions"}],"predecessor-version":[{"id":1310,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages\/701\/revisions\/1310"}],"wp:attachment":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":701,"date":"2026-05-05T11:26:00","date_gmt":"2026-05-05T11:26:00","guid":{"rendered":"https:\/\/tracking.datalystafrica.com\/?page_id=701"},"modified":"2026-05-20T15:05:02","modified_gmt":"2026-05-20T15:05:02","slug":"demo-page","status":"publish","type":"page","link":"https:\/\/tracking.datalystafrica.com\/?page_id=701","title":{"rendered":"Demo Page"},"content":{"rendered":"\n\n\n\n\n\n\nDatalyst Tracking Premium Demo<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\"\/>\n\n<style>\n\n\/* =========================================================\n ULTRA PREMIUM DATALYST TRACKING DASHBOARD\n========================================================= *\/\n\n:root{\n --bg:#030712;\n --panel:#0f172a;\n --panel2:#111827;\n --card:#16213a;\n --glass:rgba(255,255,255,0.05);\n --border:rgba(255,255,255,0.08);\n\n --text:#f8fafc;\n --muted:#94a3b8;\n\n --blue:#2563eb;\n --cyan:#06b6d4;\n --green:#22c55e;\n --orange:#f59e0b;\n --red:#ef4444;\n}\n\n\/* RESET *\/\n\n*{\n margin:0;\n padding:0;\n box-sizing:border-box;\n}\n\nhtml,body{\n width:100%;\n height:100%;\n overflow:hidden;\n background:var(--bg);\n font-family:Arial,sans-serif;\n color:var(--text);\n}\n\n\/* =========================================================\n GLOBAL BACKGROUND\n========================================================= *\/\n\nbody::before{\n content:\"\";\n position:fixed;\n top:-20%;\n right:-10%;\n width:900px;\n height:900px;\n\n background:\n radial-gradient(\n circle,\n rgba(37,99,235,0.22),\n transparent 70%\n );\n\n filter:blur(80px);\n\n z-index:0;\n pointer-events:none;\n}\n\nbody::after{\n content:\"\";\n position:fixed;\n bottom:-25%;\n left:-15%;\n width:700px;\n height:700px;\n\n background:\n radial-gradient(\n circle,\n rgba(6,182,212,0.14),\n transparent 70%\n );\n\n filter:blur(90px);\n\n z-index:0;\n pointer-events:none;\n}\n\n\/* =========================================================\n TOPBAR\n========================================================= *\/\n\n.topbar{\n position:relative;\n z-index:1000;\n\n height:78px;\n\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.92),\n rgba(15,23,42,0.82)\n );\n\n backdrop-filter:blur(18px);\n\n border-bottom:1px solid rgba(255,255,255,0.08);\n\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n padding:0 28px;\n}\n\n\/* BRAND *\/\n\n.brand{\n display:flex;\n align-items:center;\n gap:16px;\n}\n\n.logo{\n width:52px;\n height:52px;\n\n border-radius:18px;\n\n background:\n linear-gradient(\n 135deg,\n #2563eb,\n #06b6d4\n );\n\n display:flex;\n align-items:center;\n justify-content:center;\n\n font-size:22px;\n font-weight:900;\n\n color:white;\n\n box-shadow:\n 0 10px 30px rgba(37,99,235,0.45),\n inset 0 1px 1px rgba(255,255,255,0.25);\n}\n\n.brand h1{\n font-size:24px;\n font-weight:800;\n letter-spacing:1px;\n}\n\n.brand p{\n color:var(--muted);\n font-size:13px;\n margin-top:4px;\n}\n\n\/* LIVE *\/\n\n.live{\n display:flex;\n align-items:center;\n gap:10px;\n\n padding:10px 18px;\n\n border-radius:50px;\n\n background:rgba(34,197,94,0.10);\n\n border:1px solid rgba(34,197,94,0.22);\n\n color:#4ade80;\n\n font-size:13px;\n font-weight:700;\n\n letter-spacing:1px;\n\n backdrop-filter:blur(10px);\n}\n\n.live::before{\n content:\"\";\n width:10px;\n height:10px;\n border-radius:50%;\n background:#4ade80;\n\n box-shadow:\n 0 0 12px #4ade80,\n 0 0 22px #4ade80;\n}\n\n\/* =========================================================\n DASHBOARD GRID\n========================================================= *\/\n\n.dashboard{\n position:relative;\n z-index:2;\n\n display:grid;\n\n grid-template-columns:\n 340px\n 1fr\n 340px;\n\n height:calc(100vh - 78px);\n}\n\n\/* =========================================================\n SIDEBAR\n========================================================= *\/\n\n.sidebar{\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.96),\n rgba(17,24,39,0.96)\n );\n\n border-right:1px solid rgba(255,255,255,0.06);\n\n overflow:auto;\n\n padding:22px;\n}\n\n\/* TITLE *\/\n\n.sidebar h2{\n font-size:22px;\n font-weight:800;\n margin-bottom:18px;\n}\n\n\/* SEARCH *\/\n\n.search{\n width:100%;\n height:52px;\n\n border:none;\n outline:none;\n\n border-radius:18px;\n\n background:rgba(255,255,255,0.04);\n\n border:1px solid rgba(255,255,255,0.06);\n\n padding:0 18px;\n\n color:white;\n\n margin-bottom:20px;\n\n font-size:14px;\n\n backdrop-filter:blur(10px);\n}\n\n.search::placeholder{\n color:#64748b;\n}\n\n\/* =========================================================\n VEHICLE CARD\n========================================================= *\/\n\n.vehicle{\n position:relative;\n\n background:\n linear-gradient(\n 180deg,\n rgba(22,33,58,0.96),\n rgba(17,28,49,0.96)\n );\n\n border:1px solid rgba(255,255,255,0.06);\n\n border-radius:24px;\n\n padding:18px;\n\n margin-bottom:16px;\n\n overflow:hidden;\n\n transition:.35s ease;\n}\n\n\/* CARD LIGHT *\/\n\n.vehicle::before{\n content:\"\";\n position:absolute;\n top:-30%;\n right:-20%;\n\n width:180px;\n height:180px;\n\n background:\n radial-gradient(\n circle,\n rgba(37,99,235,0.16),\n transparent 70%\n );\n\n filter:blur(30px);\n}\n\n\/* HOVER *\/\n\n.vehicle:hover{\n transform:\n translateY(-6px)\n scale(1.01);\n\n border-color:rgba(37,99,235,0.28);\n\n box-shadow:\n 0 20px 40px rgba(0,0,0,0.28);\n}\n\n\/* TOP *\/\n\n.vehicle-top{\n display:flex;\n align-items:center;\n justify-content:space-between;\n}\n\n.vehicle-left{\n display:flex;\n align-items:center;\n gap:14px;\n}\n\n\/* ICON *\/\n\n.vehicle-icon{\n width:54px;\n height:54px;\n\n border-radius:18px;\n\n background:\n linear-gradient(\n 135deg,\n rgba(255,255,255,0.06),\n rgba(255,255,255,0.02)\n );\n\n display:flex;\n align-items:center;\n justify-content:center;\n\n font-size:28px;\n\n border:1px solid rgba(255,255,255,0.06);\n\n backdrop-filter:blur(10px);\n}\n\n\/* NAME *\/\n\n.vehicle-name{\n font-size:15px;\n font-weight:700;\n}\n\n.vehicle-type{\n margin-top:4px;\n font-size:12px;\n color:var(--muted);\n}\n\n\/* STATS *\/\n\n.vehicle-stats{\n display:flex;\n justify-content:space-between;\n\n margin-top:18px;\n\n font-size:13px;\n color:var(--muted);\n}\n\n\/* STATUS *\/\n\n.status{\n width:12px;\n height:12px;\n border-radius:50%;\n}\n\n.green{\n background:var(--green);\n box-shadow:\n 0 0 10px var(--green),\n 0 0 20px var(--green);\n}\n\n.orange{\n background:var(--orange);\n box-shadow:\n 0 0 10px var(--orange),\n 0 0 20px var(--orange);\n}\n\n.red{\n background:var(--red);\n box-shadow:\n 0 0 10px var(--red),\n 0 0 20px var(--red);\n}\n\n\/* =========================================================\n MAP AREA\n========================================================= *\/\n\n.map-wrapper{\n position:relative;\n overflow:hidden;\n}\n\n#map{\n width:100%;\n height:100%;\n}\n\n\/* =========================================================\n FLOATING STATS\n========================================================= *\/\n\n.overlay{\n position:absolute;\n top:18px;\n left:18px;\n\n z-index:999;\n\n display:flex;\n gap:16px;\n flex-wrap:wrap;\n}\n\n\/* STAT *\/\n\n.stat{\n min-width:140px;\n\n padding:18px 20px;\n\n border-radius:24px;\n\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.86),\n rgba(15,23,42,0.76)\n );\n\n border:1px solid rgba(255,255,255,0.08);\n\n backdrop-filter:blur(18px);\n\n box-shadow:\n 0 10px 30px rgba(0,0,0,0.28);\n}\n\n.stat h4{\n font-size:12px;\n color:var(--muted);\n margin-bottom:10px;\n text-transform:uppercase;\n letter-spacing:1px;\n}\n\n.stat strong{\n font-size:28px;\n font-weight:800;\n}\n\n\/* =========================================================\n FEED\n========================================================= *\/\n\n.feed{\n background:\n linear-gradient(\n 180deg,\n rgba(15,23,42,0.96),\n rgba(17,24,39,0.96)\n );\n\n border-left:1px solid rgba(255,255,255,0.06);\n\n overflow:auto;\n\n padding:22px;\n}\n\n.feed h2{\n font-size:22px;\n font-weight:800;\n margin-bottom:18px;\n}\n\n\/* ACTIVITY *\/\n\n.activity{\n position:relative;\n\n background:\n linear-gradient(\n 180deg,\n rgba(22,33,58,0.96),\n rgba(17,28,49,0.96)\n );\n\n border:1px solid rgba(255,255,255,0.06);\n\n border-radius:22px;\n\n padding:18px;\n\n margin-bottom:16px;\n\n transition:.35s ease;\n\n overflow:hidden;\n}\n\n\/* LIGHT *\/\n\n.activity::before{\n content:\"\";\n position:absolute;\n top:-40%;\n right:-20%;\n\n width:180px;\n height:180px;\n\n background:\n radial-gradient(\n circle,\n rgba(37,99,235,0.12),\n transparent 70%\n );\n\n filter:blur(30px);\n}\n\n\/* HOVER *\/\n\n.activity:hover{\n transform:translateY(-4px);\n\n border-color:rgba(37,99,235,0.22);\n}\n\n\/* TEXT *\/\n\n.activity-title{\n font-size:15px;\n font-weight:700;\n margin-bottom:10px;\n}\n\n.activity-time{\n font-size:13px;\n color:var(--muted);\n}\n\n\/* =========================================================\n LEAFLET PREMIUM FIX\n========================================================= *\/\n\n.leaflet-control-container{\n display:none !important;\n}\n\n.leaflet-popup-content-wrapper{\n background:#0f172a;\n color:white;\n border-radius:20px;\n border:1px solid rgba(255,255,255,0.08);\n}\n\n.leaflet-popup-tip{\n background:#0f172a;\n}\n\n\/* =========================================================\n SCROLLBAR\n========================================================= *\/\n\n::-webkit-scrollbar{\n width:8px;\n}\n\n::-webkit-scrollbar-thumb{\n background:#1e293b;\n border-radius:20px;\n}\n\n\/* =========================================================\n MOBILE\n========================================================= *\/\n\n@media(max-width:950px){\n\n html,body{\n overflow:auto;\n }\n\n .dashboard{\n display:flex;\n flex-direction:column;\n height:auto;\n }\n\n .sidebar{\n width:100%;\n height:320px;\n border-right:none;\n border-bottom:1px solid rgba(255,255,255,0.06);\n }\n\n .map-wrapper{\n height:70vh;\n min-height:500px;\n }\n\n .feed{\n border-left:none;\n border-top:1px solid rgba(255,255,255,0.06);\n }\n\n .overlay{\n top:14px;\n left:14px;\n right:14px;\n }\n\n .stat{\n flex:1;\n min-width:100px;\n }\n\n .brand h1{\n font-size:18px;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n\n\n<div class=\"topbar\">\n\n <div class=\"brand\">\n\n <div class=\"logo\">D<\/div>\n\n <div>\n <h1>DATALYST TRACKING<\/h1>\n <p>Fleet Monitoring<\/p>\n <\/div>\n\n <\/div>\n\n <div class=\"live\">\n LIVE\n <\/div>\n\n<\/div>\n\n\n\n<div class=\"dashboard\">\n\n \n\n <div class=\"sidebar\">\n\n <h2>Devices<\/h2>\n\n <input class=\"search\" placeholder=\"Search devices...\">\n\n <div id=\"deviceList\"><\/div>\n\n <\/div>\n\n \n\n <div class=\"map-wrapper\">\n\n <div class=\"overlay\">\n\n <div class=\"stat\">\n <h4>Online<\/h4>\n <strong>28<\/strong>\n <\/div>\n\n <div class=\"stat\">\n <h4>Moving<\/h4>\n <strong>16<\/strong>\n <\/div>\n\n <div class=\"stat\">\n <h4>Alerts<\/h4>\n <strong>4<\/strong>\n <\/div>\n\n <\/div>\n\n <div id=\"map\"><\/div>\n\n <\/div>\n\n \n\n <div class=\"feed\">\n\n <h2>Activity<\/h2>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Truck Alpha moving through Harare<\/div>\n <div class=\"activity-time\">2 mins ago<\/div>\n <\/div>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Toyota Hilux speeding detected<\/div>\n <div class=\"activity-time\">5 mins ago<\/div>\n <\/div>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Van 07 engine switched off<\/div>\n <div class=\"activity-time\">8 mins ago<\/div>\n <\/div>\n\n <div class=\"activity\">\n <div class=\"activity-title\">Generator Unit battery warning<\/div>\n <div class=\"activity-time\">12 mins ago<\/div>\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n\n<script>\n\n\/* =========================\n MAP\n========================= *\/\n\nconst map = L.map('map',{\n zoomControl:false\n}).setView([-17.8252, 31.0335], 7);\n\nL.tileLayer(\n'https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png',\n{\n attribution:'\u00a9 OpenStreetMap \u00a9 CARTO'\n}).addTo(map);\n\nfunction getEmoji(type){\n\n switch(type){\n\n case \"Truck\": return \"\ud83d\ude9b\";\n case \"Van\": return \"\ud83d\ude90\";\n case \"Pickup\": return \"\ud83d\udefb\";\n case \"Bus\": return \"\ud83d\ude8c\";\n case \"Bike\": return \"\ud83c\udfcd\ufe0f\";\n case \"Laptop\": return \"\ud83d\udcbb\";\n case \"Generator\": return \"\u26a1\";\n case \"TV\": return \"\ud83d\udcfa\";\n case \"SUV\": return \"\ud83d\ude97\";\n\n default:\n return \"\ud83d\udccd\";\n }\n}\n\nfunction createIcon(type,color){\n\n const emoji = getEmoji(type);\n\n return L.divIcon({\n\n className:'',\n\n iconSize:[58,58],\n\n iconAnchor:[29,29],\n\n html:`\n\n <div style=\"\n width:58px;\n height:58px;\n position:relative;\n \">\n\n <div style=\"\n position:absolute;\n inset:0;\n background:${color};\n opacity:.22;\n border-radius:50%;\n filter:blur(12px);\n \"><\/div>\n\n <div style=\"\n width:58px;\n height:58px;\n border-radius:18px;\n\n background:\n linear-gradient(\n 180deg,\n #16213a,\n #0f172a\n );\n\n border:2px solid ${color};\n\n display:flex;\n align-items:center;\n justify-content:center;\n\n font-size:28px;\n\n position:relative;\n z-index:2;\n\n box-shadow:\n 0 10px 25px rgba(0,0,0,0.35);\n \">\n ${emoji}\n <\/div>\n\n <div style=\"\n width:12px;\n height:12px;\n border-radius:50%;\n\n background:${color};\n\n border:2px solid white;\n\n position:absolute;\n right:2px;\n bottom:2px;\n\n z-index:3;\n \"><\/div>\n\n <\/div>\n `\n });\n}\n\n\/* =========================\n DEVICES\n========================= *\/\n\nconst vehicles = [\n\n{name:\"Truck Alpha\", type:\"Truck\", lat:-17.82, lng:31.03, speed:68, status:\"moving\"},\n{name:\"Truck Bravo\", type:\"Truck\", lat:-18.01, lng:30.88, speed:54, status:\"moving\"},\n{name:\"Van 07\", type:\"Van\", lat:-17.67, lng:30.95, speed:0, status:\"offline\"},\n{name:\"Toyota Hilux\", type:\"Pickup\", lat:-17.91, lng:31.21, speed:92, status:\"warning\"},\n{name:\"Fuel Tanker\", type:\"Truck\", lat:-18.25, lng:30.44, speed:44, status:\"moving\"},\n{name:\"School Bus\", type:\"Bus\", lat:-17.52, lng:31.54, speed:33, status:\"moving\"},\n{name:\"Generator Unit\", type:\"Generator\", lat:-19.02, lng:30.85, speed:0, status:\"offline\"},\n{name:\"Courier Bike\", type:\"Bike\", lat:-17.30, lng:30.67, speed:70, status:\"moving\"},\n{name:\"Laptop Tracker\", type:\"Laptop\", lat:-18.15, lng:31.42, speed:0, status:\"warning\"},\n{name:\"Security Car\", type:\"SUV\", lat:-17.98, lng:32.10, speed:48, status:\"moving\"},\n{name:\"Office TV\", type:\"TV\", lat:-18.20, lng:31.90, speed:0, status:\"offline\"},\n{name:\"Delivery Van\", type:\"Van\", lat:-17.74, lng:30.40, speed:57, status:\"moving\"}\n\n];\n\nconst deviceList = document.getElementById(\"deviceList\");\n\nvehicles.forEach(v=>{\n\n let color =\n v.status === \"moving\"\n ? \"#22c55e\"\n : v.status === \"warning\"\n ? \"#f59e0b\"\n : \"#ef4444\";\n\n let dot =\n v.status === \"moving\"\n ? \"green\"\n : v.status === \"warning\"\n ? \"orange\"\n : \"red\";\n\n const emoji = getEmoji(v.type);\n\n deviceList.innerHTML += `\n\n <div class=\"vehicle\">\n\n <div class=\"vehicle-top\">\n\n <div class=\"vehicle-left\">\n\n <div class=\"vehicle-icon\">\n ${emoji}\n <\/div>\n\n <div>\n <div class=\"vehicle-name\">${v.name}<\/div>\n <div class=\"vehicle-type\">${v.type}<\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"status ${dot}\"><\/div>\n\n <\/div>\n\n <div class=\"vehicle-stats\">\n <span>${v.speed} km\/h<\/span>\n <span>${v.status}<\/span>\n <\/div>\n\n <\/div>\n\n `;\n\n v.marker = L.marker(\n [v.lat,v.lng],\n {\n icon:createIcon(v.type,color)\n }\n ).addTo(map);\n\n v.marker.bindPopup(`\n\n <div style=\"min-width:180px;\">\n\n <div style=\"font-size:28px;margin-bottom:10px;\">\n ${emoji}\n <\/div>\n\n <strong style=\"font-size:16px;\">\n ${v.name}\n <\/strong>\n\n <br><br>\n\n Type: ${v.type}<br>\n Speed: ${v.speed} km\/h<br>\n Status: ${v.status}\n\n <\/div>\n\n `);\n\n});\n\n\/* =========================\n LIVE MOVEMENT\n========================= *\/\n\nsetInterval(()=>{\n\n vehicles.forEach(v=>{\n\n if(v.status === \"offline\") return;\n\n v.lat += (Math.random() - 0.5) * 0.03;\n v.lng += (Math.random() - 0.5) * 0.03;\n\n v.marker.setLatLng([v.lat,v.lng]);\n\n });\n\n},2500);\n\n\/* =========================\n MOBILE FIX\n========================= *\/\n\nwindow.addEventListener(\"resize\",()=>{\n\n setTimeout(()=>{\n\n map.invalidateSize();\n\n },300);\n\n});\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Datalyst Tracking Premium Demo D DATALYST TRACKING Fleet Monitoring LIVE Devices Online 28 Moving 16 Alerts 4 Activity Truck Alpha moving through Harare 2 mins ago Toyota Hilux speeding detected 5 mins ago Van 07 engine switched off 8 mins ago Generator Unit battery warning 12 mins ago<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-701","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=701"}],"version-history":[{"count":19,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages\/701\/revisions"}],"predecessor-version":[{"id":1310,"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=\/wp\/v2\/pages\/701\/revisions\/1310"}],"wp:attachment":[{"href":"https:\/\/tracking.datalystafrica.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}