Kode Isi File field_monitoring.html
Kode Isi File field_monitoring.html
Bantu buatkan kode isi file field_monitoring.html.
FarmerSmartAI - Halaman Monitoring Lahan
Berikut kode lengkap untuk file field_monitoring.html (halaman monitoring lahan) FarmerSmartAI:
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monitoring Lahan - FarmerSmartAI</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
:root {
--primary: #2e7d32;
--primary-dark: #1b5e20;
--primary-light: #4caf50;
--secondary: #ff9800;
--accent: #8bc34a;
--light: #f5f5f5;
--dark: #333;
--gray: #757575;
--white: #ffffff;
--warning: #ff9800;
--danger: #f44336;
--success: #4caf50;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f0f4f0;
color: var(--dark);
}
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
background-color: var(--primary);
color: white;
padding: 20px 0;
}
.logo {
display: flex;
align-items: center;
padding: 0 20px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
.logo-icon {
font-size: 2rem;
margin-right: 10px;
}
.logo h1 {
font-size: 1.5rem;
}
.sidebar ul {
list-style: none;
}
.sidebar li {
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
}
.sidebar li i {
margin-right: 10px;
width: 20px;
text-align: center;
}
.sidebar li:hover {
background-color: var(--primary-dark);
}
.sidebar li.active {
background-color: var(--primary-dark);
border-left: 4px solid var(--accent);
}
/* Main Content */
.main-content {
padding: 20px;
overflow-y: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
}
.header h1 {
color: var(--primary);
font-size: 1.8rem;
}
.user-info {
display: flex;
align-items: center;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-right: 10px;
}
/* Field Overview */
.field-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.overview-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
}
.overview-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-right: 15px;
}
.overview-icon.healthy {
background-color: #e8f5e9;
color: var(--success);
}
.overview-icon.warning {
background-color: #fff3e0;
color: var(--warning);
}
.overview-icon.danger {
background-color: #ffebee;
color: var(--danger);
}
.overview-info h3 {
font-size: 0.9rem;
color: var(--gray);
margin-bottom: 5px;
}
.overview-info .value {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 5px;
}
.overview-info .status {
font-size: 0.8rem;
padding: 3px 8px;
border-radius: 20px;
display: inline-block;
}
.status-healthy {
background-color: #e8f5e9;
color: var(--success);
}
.status-warning {
background-color: #fff3e0;
color: var(--warning);
}
.status-danger {
background-color: #ffebee;
color: var(--danger);
}
/* Main Monitoring Grid */
.monitoring-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
@media (max-width: 1024px) {
.monitoring-grid {
grid-template-columns: 1fr;
}
}
/* Map Container */
.map-container {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
height: 500px;
}
.map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.map-header h2 {
color: var(--primary);
font-size: 1.3rem;
}
#fieldMap {
height: 400px;
border-radius: 8px;
overflow: hidden;
}
/* Sensor Data */
.sensor-data {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
height: 500px;
overflow-y: auto;
}
.sensor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.sensor-header h2 {
color: var(--primary);
font-size: 1.3rem;
}
.sensor-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.sensor-item {
display: flex;
align-items: center;
padding: 15px;
border-radius: 8px;
background-color: var(--light);
transition: transform 0.2s;
}
.sensor-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.sensor-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-right: 15px;
color: white;
}
.sensor-icon.moisture {
background-color: #2196f3;
}
.sensor-icon.temperature {
background-color: #ff5722;
}
.sensor-icon.humidity {
background-color: #009688;
}
.sensor-icon.ph {
background-color: #9c27b0;
}
.sensor-icon.nutrient {
background-color: #ff9800;
}
.sensor-info {
flex: 1;
}
.sensor-info h3 {
font-size: 1rem;
margin-bottom: 5px;
}
.sensor-value {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 5px;
}
.sensor-status {
font-size: 0.8rem;
padding: 3px 8px;
border-radius: 20px;
display: inline-block;
}
/* Charts Section */
.charts-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
@media (max-width: 768px) {
.charts-section {
grid-template-columns: 1fr;
}
}
.chart-container {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.chart-header h2 {
color: var(--primary);
font-size: 1.3rem;
}
.chart-actions select {
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #ddd;
}
.chart {
height: 250px;
position: relative;
}
/* Alerts Section */
.alerts-section {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.alerts-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.alerts-header h2 {
color: var(--primary);
font-size: 1.3rem;
}
.alert-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.alert-item {
display: flex;
align-items: center;
padding: 15px;
border-radius: 8px;
border-left: 4px solid var(--warning);
}
.alert-item.warning {
border-left-color: var(--warning);
background-color: #fff3e0;
}
.alert-item.danger {
border-left-color: var(--danger);
background-color: #ffebee;
}
.alert-item.info {
border-left-color: #2196f3;
background-color: #e3f2fd;
}
.alert-icon {
font-size: 1.5rem;
margin-right: 15px;
}
.alert-item.warning .alert-icon {
color: var(--warning);
}
.alert-item.danger .alert-icon {
color: var(--danger);
}
.alert-item.info .alert-icon {
color: #2196f3;
}
.alert-content {
flex: 1;
}
.alert-content h3 {
font-size: 1rem;
margin-bottom: 5px;
}
.alert-content p {
font-size: 0.9rem;
color: var(--gray);
}
.alert-time {
font-size: 0.8rem;
color: var(--gray);
}
/* Responsive Design */
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
.mobile-menu-btn {
display: block;
background: none;
border: none;
font-size: 1.5rem;
color: var(--primary);
cursor: pointer;
}
}
.mobile-menu-btn {
display: none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="dashboard">
<!-- Sidebar -->
<div class="sidebar">
<div class="logo">
<i class="fas fa-seedling logo-icon"></i>
<h1>FarmerSmartAI</h1>
</div>
<ul>
<li><a href="index.html" style="color: white; text-decoration: none;"><i class="fas fa-home"></i> Beranda</a></li>
<li class="active"><i class="fas fa-map-marked-alt"></i> Monitoring Lahan</li>
<li><a href="farmer_smart_ai_dashboard.html" style="color: white; text-decoration: none;"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
<li><i class="fas fa-robot"></i> Rekomendasi AI</li>
<li><i class="fas fa-chart-line"></i> Prediksi Panen</li>
<li><i class="fas fa-tint"></i> Manajemen Air</li>
<li><i class="fas fa-clipboard-list"></i> Laporan</li>
<li><i class="fas fa-cog"></i> Pengaturan</li>
</ul>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="header">
<div>
<button class="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
<h1>Monitoring Lahan</h1>
</div>
<div class="user-info">
<div class="user-avatar">PS</div>
<span>Petani Smart</span>
</div>
</div>
<!-- Field Overview -->
<div class="field-overview">
<div class="overview-card">
<div class="overview-icon healthy">
<i class="fas fa-tint"></i>
</div>
<div class="overview-info">
<h3>Kelembaban Tanah</h3>
<div class="value">68%</div>
<span class="status status-healthy">Optimal</span>
</div>
</div>
<div class="overview-card">
<div class="overview-icon healthy">
<i class="fas fa-thermometer-half"></i>
</div>
<div class="overview-info">
<h3>Suhu Udara</h3>
<div class="value">28°C</div>
<span class="status status-healthy">Normal</span>
</div>
</div>
<div class="overview-card">
<div class="overview-icon warning">
<i class="fas fa-wind"></i>
</div>
<div class="overview-info">
<h3>Kelembaban Udara</h3>
<div class="value">82%</div>
<span class="status status-warning">Tinggi</span>
</div>
</div>
<div class="overview-card">
<div class="overview-icon healthy">
<i class="fas fa-flask"></i>
</div>
<div class="overview-info">
<h3>pH Tanah</h3>
<div class="value">6.8</div>
<span class="status status-healthy">Ideal</span>
</div>
</div>
</div>
<!-- Main Monitoring Grid -->
<div class="monitoring-grid">
<!-- Map Container -->
<div class="map-container">
<div class="map-header">
<h2>Peta Lahan Pertanian</h2>
<div class="map-actions">
<button id="zoomIn" class="btn-map"><i class="fas fa-search-plus"></i></button>
<button id="zoomOut" class="btn-map"><i class="fas fa-search-minus"></i></button>
<button id="resetView" class="btn-map"><i class="fas fa-crosshairs"></i></button>
</div>
</div>
<div id="fieldMap"></div>
</div>
<!-- Sensor Data -->
<div class="sensor-data">
<div class="sensor-header">
<h2>Data Sensor Real-time</h2>
<span id="lastUpdate">Diperbarui: 12:30:45</span>
</div>
<div class="sensor-list">
<div class="sensor-item">
<div class="sensor-icon moisture">
<i class="fas fa-tint"></i>
</div>
<div class="sensor-info">
<h3>Kelembaban Tanah</h3>
<div class="sensor-value">68%</div>
<span class="sensor-status status-healthy">Optimal</span>
</div>
</div>
<div class="sensor-item">
<div class="sensor-icon temperature">
<i class="fas fa-thermometer-half"></i>
</div>
<div class="sensor-info">
<h3>Suhu Udara</h3>
<div class="sensor-value">28°C</div>
<span class="sensor-status status-healthy">Normal</span>
</div>
</div>
<div class="sensor-item">
<div class="sensor-icon humidity">
<i class="fas fa-wind"></i>
</div>
<div class="sensor-info">
<h3>Kelembaban Udara</h3>
<div class="sensor-value">82%</div>
<span class="sensor-status status-warning">Tinggi</span>
</div>
</div>
<div class="sensor-item">
<div class="sensor-icon ph">
<i class="fas fa-flask"></i>
</div>
<div class="sensor-info">
<h3>pH Tanah</h3>
<div class="sensor-value">6.8</div>
<span class="sensor-status status-healthy">Ideal</span>
</div>
</div>
<div class="sensor-item">
<div class="sensor-icon nutrient">
<i class="fas fa-atom"></i>
</div>
<div class="sensor-info">
<h3>Nitrogen (N)</h3>
<div class="sensor-value">42 ppm</div>
<span class="sensor-status status-healthy">Cukup</span>
</div>
</div>
<div class="sensor-item">
<div class="sensor-icon nutrient">
<i class="fas fa-atom"></i>
</div>
<div class="sensor-info">
<h3>Fosfor (P)</h3>
<div class="sensor-value">28 ppm</div>
<span class="sensor-status status-healthy">Cukup</span>
</div>
</div>
<div class="sensor-item">
<div class="sensor-icon nutrient">
<i class="fas fa-atom"></i>
</div>
<div class="sensor-info">
<h3>Kalium (K)</h3>
<div class="sensor-value">35 ppm</div>
<span class="sensor-status status-warning">Rendah</span>
</div>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="charts-section">
<div class="chart-container">
<div class="chart-header">
<h2>Trend Kelembaban Tanah</h2>
<div class="chart-actions">
<select id="soilMoistureRange">
<option value="7">7 Hari</option>
<option value="30" selected>30 Hari</option>
<option value="90">90 Hari</option>
</select>
</div>
</div>
<div class="chart" id="soilMoistureChart">
<canvas id="soilMoistureCanvas"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-header">
<h2>Trend Suhu & Kelembaban</h2>
<div class="chart-actions">
<select id="tempHumidityRange">
<option value="7">7 Hari</option>
<option value="30" selected>30 Hari</option>
<option value="90">90 Hari</option>
</select>
</div>
</div>
<div class="chart" id="tempHumidityChart">
<canvas id="tempHumidityCanvas"></canvas>
</div>
</div>
</div>
<!-- Alerts Section -->
<div class="alerts-section">
<div class="alerts-header">
<h2>Peringatan & Notifikasi</h2>
<span>3 Peringatan Aktif</span>
</div>
<div class="alert-list">
<div class="alert-item warning">
<div class="alert-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="alert-content">
<h3>Kelembaban Udara Tinggi</h3>
<p>Kelembaban udara mencapai 82%. Risiko penyakit jamur meningkat.</p>
</div>
<div class="alert-time">2 jam lalu</div>
</div>
<div class="alert-item danger">
<div class="alert-icon">
<i class="fas fa-skull-crossbones"></i>
</div>
<div class="alert-content">
<h3>Level Kalium Rendah</h3>
<p>Level kalium (K) di bawah optimal. Pertimbangkan pemupukan tambahan.</p>
</div>
<div class="alert-time">5 jam lalu</div>
</div>
<div class="alert-item info">
<div class="alert-icon">
<i class="fas fa-info-circle"></i>
</div>
<div class="alert-content">
<h3>Irigasi Diperlukan</h3>
<p>Area A-3 memerlukan irigasi dalam 24 jam ke depan.</p>
</div>
<div class="alert-time">1 hari lalu</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Initialize Map
function initMap() {
// Center map on sample farm location (coordinates for a sample farm in Indonesia)
const map = L.map('fieldMap').setView([-7.250445, 112.768845], 16);
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add field boundaries (sample polygons)
const fieldBoundary = L.polygon([
[-7.2508, 112.7682],
[-7.2505, 112.7695],
[-7.2498, 112.7692],
[-7.2501, 112.7680]
], {
color: '#2e7d32',
fillColor: '#4caf50',
fillOpacity: 0.3,
weight: 2
}).addTo(map).bindPopup('Lahan Utama - Padi');
// Add sensor markers
const sensor1 = L.marker([-7.2506, 112.7685])
.addTo(map)
.bindPopup('<b>Sensor 1</b><br>Kelembaban: 68%<br>Suhu: 28°C');
const sensor2 = L.marker([-7.2503, 112.7690])
.addTo(map)
.bindPopup('<b>Sensor 2</b><br>Kelembaban: 72%<br>pH: 6.8');
const sensor3 = L.marker([-7.2500, 112.7688])
.addTo(map)
.bindPopup('<b>Sensor 3</b><br>Kelembaban: 65%<br>Nitrogen: 42ppm');
// Map controls
document.getElementById('zoomIn').addEventListener('click', function() {
map.zoomIn();
});
document.getElementById('zoomOut').addEventListener('click', function() {
map.zoomOut();
});
document.getElementById('resetView').addEventListener('click', function() {
map.setView([-7.250445, 112.768845], 16);
});
}
// Initialize Charts
function initCharts() {
// Soil Moisture Chart
const soilMoistureCtx = document.getElementById('soilMoistureCanvas').getContext('2d');
const soilMoistureChart = new Chart(soilMoistureCtx, {
type: 'line',
data: {
labels: ['1', '5', '10', '15', '20', '25', '30'],
datasets: [{
label: 'Kelembaban Tanah (%)',
data: [65, 68, 72, 70, 68, 66, 68],
borderColor: '#2196f3',
backgroundColor: 'rgba(33, 150, 243, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
min: 50,
max: 80,
title: {
display: true,
text: 'Kelembaban (%)'
}
},
x: {
title: {
display: true,
text: 'Hari'
}
}
},
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});
// Temperature & Humidity Chart
const tempHumidityCtx = document.getElementById('tempHumidityCanvas').getContext('2d');
const tempHumidityChart = new Chart(tempHumidityCtx, {
type: 'line',
data: {
labels: ['1', '5', '10', '15', '20', '25', '30'],
datasets: [
{
label: 'Suhu (°C)',
data: [26, 28, 30, 29, 27, 28, 28],
borderColor: '#ff5722',
backgroundColor: 'rgba(255, 87, 34, 0.1)',
borderWidth: 2,
fill: true,
yAxisID: 'y',
tension: 0.4
},
{
label: 'Kelembaban Udara (%)',
data: [75, 78, 82, 80, 76, 78, 82],
borderColor: '#009688',
backgroundColor: 'rgba(0, 150, 136, 0.1)',
borderWidth: 2,
fill: true,
yAxisID: 'y1',
tension: 0.4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: 'Suhu (°C)'
},
min: 20,
max: 35
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: 'Kelembaban (%)'
},
min: 50,
max: 90,
grid: {
drawOnChartArea: false
}
},
x: {
title: {
display: true,
text: 'Hari'
}
}
},
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});
// Update charts when range selector changes
document.getElementById('soilMoistureRange').addEventListener('change', function() {
// In a real app, this would fetch new data based on the selected range
console.log('Soil moisture range changed to:', this.value);
});
document.getElementById('tempHumidityRange').addEventListener('change', function() {
// In a real app, this would fetch new data based on the selected range
console.log('Temperature/Humidity range changed to:', this.value);
});
}
// Update sensor data (simulate real-time updates)
function updateSensorData() {
// Simulate small fluctuations in sensor values
const moistureElement = document.querySelectorAll('.sensor-value')[0];
const currentMoisture = parseInt(moistureElement.textContent);
const newMoisture = Math.max(60, Math.min(75, currentMoisture + (Math.random() * 2 - 1)));
moistureElement.textContent = Math.round(newMoisture) + '%';
const tempElement = document.querySelectorAll('.sensor-value')[1];
const currentTemp = parseInt(tempElement.textContent);
const newTemp = Math.max(26, Math.min(32, currentTemp + (Math.random() * 0.4 - 0.2)));
tempElement.textContent = Math.round(newTemp * 10) / 10 + '°C';
const humidityElement = document.querySelectorAll('.sensor-value')[2];
const currentHumidity = parseInt(humidityElement.textContent);
const newHumidity = Math.max(75, Math.min(85, currentHumidity + (Math.random() * 2 - 1)));
humidityElement.textContent = Math.round(newHumidity) + '%';
// Update last updated time
const now = new Date();
document.getElementById('lastUpdate').textContent = 'Diperbarui: ' +
now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0') + ':' +
now.getSeconds().toString().padStart(2, '0');
}
// Initialize everything when page loads
document.addEventListener('DOMContentLoaded', function() {
initMap();
initCharts();
// Update sensor data every 5 seconds
setInterval(updateSensorData, 5000);
// Mobile menu toggle
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const sidebar = document.querySelector('.sidebar');
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', function() {
sidebar.style.display = sidebar.style.display === 'block' ? 'none' : 'block';
});
}
});
</script>
</body>
</html>
```
Fitur Halaman Field Monitoring:
1. Peta Interaktif Lahan - Menggunakan Leaflet.js untuk menampilkan peta lahan dengan:
· Batas-batas lahan
· Marker sensor IoT
· Informasi popup untuk setiap sensor
· Kontrol zoom dan reset view
2. Dashboard Ringkasan - Kartu overview dengan status kesehatan lahan:
· Kelembaban tanah, suhu udara, kelembaban udara, pH tanah
· Status warna (hijau, kuning, merah) untuk indikasi cepat
3. Data Sensor Real-time - Panel dengan data dari berbagai sensor:
· Kelembaban tanah, suhu, kelembaban udara
· pH tanah dan nutrisi (N, P, K)
· Status dan nilai terkini
· Pembaruan otomatis setiap 5 detik
4. Grafik Trend Data - Visualisasi data historis menggunakan Chart.js:
· Trend kelembaban tanah selama 30 hari
· Trend suhu dan kelembaban udara
· Opsi untuk mengubah rentang waktu
5. Sistem Peringatan - Panel notifikasi untuk:
· Kondisi yang memerlukan perhatian
· Level nutrisi rendah
· Rekomendasi irigasi
· Peringatan risiko penyakit
6. Desain Responsif - Tampilan yang optimal di desktop, tablet, dan mobile
7. Sidebar Navigasi - Akses cepat ke semua fitur FarmerSmartAI
Halaman ini memberikan gambaran komprehensif tentang kondisi lahan pertanian dengan visualisasi data yang mudah dipahami, membantu petani membuat keputusan berdasarkan data yang akurat dan terkini.
Bersambung ke: Kode Isi File ai_recommendations.html
Comments
Post a Comment