Sistem Monitoring Kualitas Udara (Air Quality Monitoring System)<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.7.0\/chart.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial, sans-serif;\n }\n\n body {\n background-color: #f0f2f5;\n }\n\n .navbar {\n background: #38a169;\n color: white;\n padding: 1rem;\n text-align: center;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .dashboard {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n\n .card {\n background: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .sensor-value {\n font-size: 2rem;\n font-weight: bold;\n color: #1a237e;\n margin: 10px 0;\n }\n\n .status {\n padding: 5px 10px;\n border-radius: 20px;\n font-size: 0.9rem;\n display: inline-block;\n }\n\n .good {\n background: #c8e6c9;\n color: #2e7d32;\n }\n\n .moderate {\n background: #fff3e0;\n color: #ef6c00;\n }\n\n .poor {\n background: #ffcdd2;\n color: #c62828;\n }\n\n .filter-status {\n margin-top: 20px;\n }\n\n .button {\n background: #1a237e;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n margin-top: 10px;\n }\n\n .button:hover {\n background: #283593;\n }\n\n .chart-container {\n margin-top: 20px;\n height: 300px;\n }\n\n @media (max-width: 768px) {\n .dashboard {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <nav class=\"navbar\">\n <h1>Sistem Monitoring Kualitas Udara (Air Quality Monitoring System)<\/h1>\n <\/nav>\n\n <div class=\"container\">\n <div class=\"dashboard\">\n <div class=\"card\">\n <h2>PM2.5 (Partikel Halus \/ Fine Particles)<\/h2>\n <div class=\"sensor-value\">25 \u00b5g\/m\u00b3<\/div>\n <span class=\"status moderate\">Sedang (Moderate)<\/span>\n <\/div>\n\n <div class=\"card\">\n <h2>CO2 (Karbon Dioksida \/ Carbon Dioxide)<\/h2>\n <div class=\"sensor-value\">650 ppm<\/div>\n <span class=\"status good\">Baik (Good)<\/span>\n <\/div>\n\n <div class=\"card\">\n <h2>TVOC (Total Senyawa Organik Volatil \/ Total Volatile Organic Compounds)<\/h2>\n <div class=\"sensor-value\">0.25 mg\/m\u00b3<\/div>\n <span class=\"status good\">Baik (Good)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card filter-status\">\n <h2>Status Filter (Filter Status)<\/h2>\n <p>Kondisi Filter: <span id=\"filterStatus\">Baik (Good)<\/span><\/p>\n <p>Estimasi Penggantian Filter: <span id=\"filterChange\">30 hari (days)<\/span><\/p>\n <button class=\"button\" onclick=\"toggleAutomatic()\">\n Mode Otomatis (Automatic Mode): <span id=\"autoStatus\">ON<\/span>\n <\/button>\n <\/div>\n\n <div class=\"card chart-container\">\n <canvas id=\"airQualityChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Simulasi data sensor (Sensor data simulation)\n function updateSensorValues() {\n const sensorValues = document.querySelectorAll('.sensor-value');\n sensorValues.forEach(sensor => {\n const currentValue = parseFloat(sensor.textContent);\n const newValue = currentValue + (Math.random() - 0.5) * 5;\n sensor.textContent = Math.max(0, newValue.toFixed(1)) + \n (sensor.textContent.includes('ppm') ? ' ppm' : ' \u00b5g\/m\u00b3');\n });\n }\n\n \/\/ Toggle mode otomatis (Toggle automatic mode)\n let isAutomatic = true;\n function toggleAutomatic() {\n isAutomatic = !isAutomatic;\n document.getElementById('autoStatus').textContent = isAutomatic ? 'ON' : 'OFF';\n }\n\n \/\/ Inisialisasi grafik (Initialize chart)\n const ctx = document.getElementById('airQualityChart').getContext('2d');\n const airQualityChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: Array.from({length: 24}, (_, i) => `${i}:00`),\n datasets: [{\n label: 'PM2.5 (\u00b5g\/m\u00b3)',\n data: Array.from({length: 24}, () => Math.random() * 50),\n borderColor: '#1a237e',\n tension: 0.4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n });\n\n \/\/ Update data setiap 3 detik (Update data every 3 seconds)\n setInterval(() => {\n updateSensorValues();\n \n \/\/ Update grafik (Update chart)\n const newData = airQualityChart.data.datasets[0].data;\n newData.shift();\n newData.push(Math.random() * 50);\n airQualityChart.update();\n }, 3000);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n \n \n <title>Pemantauan Kualitas Udara (Air Quality Monitoring)<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.css\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial, sans-serif;\n }\n\n body {\n background-color: #f0f2f5;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .header {\n background-color: #ffffff;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .header h1 {\n color: #1a73e8;\n margin-bottom: 10px;\n font-size: 24px;\n }\n\n .status-panel {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .status-card {\n background: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .status-card h3 {\n color: #5f6368;\n margin-bottom: 10px;\n }\n\n .status-value {\n font-size: 24px;\n font-weight: bold;\n color: #1a73e8;\n }\n\n #map {\n height: 400px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .controls {\n background: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .button {\n background: #1a73e8;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n margin-right: 10px;\n }\n\n .button:hover {\n background: #1557b0;\n }\n\n .status-good {\n color: #0f9d58;\n }\n\n .status-moderate {\n color: #f4b400;\n }\n\n .status-bad {\n color: #db4437;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>Sistem Pemantauan Kualitas Udara (Air Quality Monitoring System)<\/h1>\n <p>Pemantauan Real-time & Otomasi Filtrasi (Real-time Monitoring & Filtration Automation)<\/p>\n <\/div>\n\n <div class=\"status-panel\">\n <div class=\"status-card\">\n <h3>Kualitas Udara (Air Quality)<\/h3>\n <div class=\"status-value\" id=\"aqi\">—<\/div>\n <\/div>\n <div class=\"status-card\">\n <h3>Suhu (Temperature)<\/h3>\n <div class=\"status-value\" id=\"temperature\">–\u00b0C<\/div>\n <\/div>\n <div class=\"status-card\">\n <h3>Kelembaban (Humidity)<\/h3>\n <div class=\"status-value\" id=\"humidity\">–%<\/div>\n <\/div>\n <div class=\"status-card\">\n <h3>PM2.5<\/h3>\n <div class=\"status-value\" id=\"pm25\">— \u00b5g\/m\u00b3<\/div>\n <\/div>\n <\/div>\n\n <div id=\"map\"><\/div>\n\n <div class=\"controls\">\n <h3>Kontrol Sistem Filtrasi (Filtration System Controls)<\/h3>\n <p>Status: <span id=\"filterStatus\">Aktif (Active)<\/span><\/p>\n <button class=\"button\" id=\"toggleFilter\">\n Aktifkan\/Nonaktifkan Filter (Toggle Filter)\n <\/button>\n <button class=\"button\" id=\"autoMode\">\n Mode Otomatis (Auto Mode)\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize map\n const map = L.map('map').setView([-6.2088, 106.8456], 13); \/\/ Default to Jakarta\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ Simulate sensor data\n function updateSensorData() {\n const aqi = Math.floor(Math.random() * 200);\n const temp = (20 + Math.random() * 15).toFixed(1);\n const humidity = Math.floor(50 + Math.random() * 30);\n const pm25 = (Math.random() * 100).toFixed(1);\n\n document.getElementById('aqi').textContent = aqi;\n document.getElementById('temperature').textContent = `${temp}\u00b0C`;\n document.getElementById('humidity').textContent = `${humidity}%`;\n document.getElementById('pm25').textContent = `${pm25} \u00b5g\/m\u00b3`;\n\n \/\/ Update AQI color\n const aqiElement = document.getElementById('aqi');\n if (aqi <= 50) {\n aqiElement.className = 'status-value status-good';\n } else if (aqi <= 100) {\n aqiElement.className = 'status-value status-moderate';\n } else {\n aqiElement.className = 'status-value status-bad';\n }\n }\n\n \/\/ Get user's location\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(position => {\n const { latitude, longitude } = position.coords;\n map.setView([latitude, longitude], 13);\n L.marker([latitude, longitude]).addTo(map)\n .bindPopup('Lokasi Anda (Your Location)').openPopup();\n });\n }\n\n \/\/ Filter control\n let filterActive = true;\n const toggleFilter = document.getElementById('toggleFilter');\n const filterStatus = document.getElementById('filterStatus');\n\n toggleFilter.addEventListener('click', () => {\n filterActive = !filterActive;\n filterStatus.textContent = filterActive ? \n 'Aktif (Active)' : 'Nonaktif (Inactive)';\n });\n\n \/\/ Auto mode\n const autoMode = document.getElementById('autoMode');\n let autoModeActive = false;\n\n autoMode.addEventListener('click', () => {\n autoModeActive = !autoModeActive;\n autoMode.textContent = autoModeActive ? \n 'Mode Manual (Manual Mode)' : 'Mode Otomatis (Auto Mode)';\n });\n\n \/\/ Update data every 5 seconds\n updateSensorData();\n setInterval(updateSensorData, 5000);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sistem Monitoring Kualitas Udara (Air Quality Monitoring System) Sistem Monitoring Kualitas Udara (Air Quality Monitoring System) PM2.5 (Partikel Halus \/ Fine Particles) 25 \u00b5g\/m\u00b3 Sedang (Moderate) CO2 (Karbon Dioksida \/ Carbon Dioxide) 650 ppm Baik (Good) TVOC (Total Senyawa Organik Volatil \/ Total Volatile Organic Compounds) 0.25 mg\/m\u00b3 Baik (Good) Status Filter (Filter Status) Kondisi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":922,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1362","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/www.wpscentre-id.com\/index.php\/author\/indonesiawpscentre_\/"},"uagb_comment_info":0,"uagb_excerpt":"Sistem Monitoring Kualitas Udara (Air Quality Monitoring System) Sistem Monitoring Kualitas Udara (Air Quality Monitoring System) PM2.5 (Partikel Halus \/ Fine Particles) 25 \u00b5g\/m\u00b3 Sedang (Moderate) CO2 (Karbon Dioksida \/ Carbon Dioxide) 650 ppm Baik (Good) TVOC (Total Senyawa Organik Volatil \/ Total Volatile Organic Compounds) 0.25 mg\/m\u00b3 Baik (Good) Status Filter (Filter Status) Kondisi…","_links":{"self":[{"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/pages\/1362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/comments?post=1362"}],"version-history":[{"count":2,"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/pages\/1362\/revisions"}],"predecessor-version":[{"id":1373,"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/pages\/1362\/revisions\/1373"}],"up":[{"embeddable":true,"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/pages\/922"}],"wp:attachment":[{"href":"https:\/\/www.wpscentre-id.com\/index.php\/wp-json\/wp\/v2\/media?parent=1362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}