Kode Isi File harvest_prediction.html

Kode Isi File harvest_prediction.html

Bantu buatkan kode isi file harvest_prediction.html

FarmerSmartAI - Halaman Prediksi Panen

Berikut kode lengkap untuk file harvest_prediction.html (halaman prediksi panen) FarmerSmartAI:

```html

<!DOCTYPE html>

<head>

<title>Prediksi Panen - FarmerSmartAI</title>

<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;

--info: #2196f3;

}

* {

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;

}

/* Prediction Overview */

.prediction-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.primary {

background-color: #e8f5e9;

color: var(--success);

}

.overview-icon.warning {

background-color: #fff3e0;

color: var(--warning);

}

.overview-icon.info {

background-color: #e3f2fd;

color: var(--info);

}

.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 .trend {

font-size: 0.8rem;

display: flex;

align-items: center;

}

.trend.up {

color: var(--success);

}

.trend.down {

color: var(--danger);

}

/* Main Prediction Content */

.prediction-content {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 20px;

margin-bottom: 30px;

}

@media (max-width: 1024px) {

.prediction-content {

grid-template-columns: 1fr;

}

/* Harvest Timeline */

.harvest-timeline {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.section-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.section-header h2 {

color: var(--primary);

font-size: 1.5rem;

}

.timeline-container {

position: relative;

padding: 20px 0;

}

.timeline {

position: relative;

max-width: 100%;

margin: 0 auto;

}

.timeline::after {

content: '';

position: absolute;

width: 100%;

height: 4px;

background-color: var(--primary-light);

top: 50%;

left: 0;

transform: translateY(-50%);

z-index: 1;

}

.timeline-item {

padding: 10px 40px;

position: relative;

width: 100%;

box-sizing: border-box;

}

.timeline-content {

background-color: white;

border-radius: 8px;

padding: 15px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

position: relative;

z-index: 2;

display: flex;

align-items: center;

}

.timeline-content.current {

border-left: 4px solid var(--primary);

}

.timeline-content.future {

border-left: 4px solid var(--info);

}

.timeline-content.past {

border-left: 4px solid var(--gray);

opacity: 0.7;

}

.timeline-marker {

position: absolute;

width: 20px;

height: 20px;

border-radius: 50%;

background-color: var(--white);

border: 3px solid;

top: 50%;

transform: translateY(-50%);

z-index: 3;

}

.timeline-item.current .timeline-marker {

border-color: var(--primary);

background-color: var(--primary);

}

.timeline-item.future .timeline-marker {

border-color: var(--info);

}

.timeline-item.past .timeline-marker {

border-color: var(--gray);

}

.timeline-date {

font-weight: bold;

margin-right: 15px;

min-width: 100px;

}

.timeline-status {

flex: 1;

}

.timeline-status h3 {

font-size: 1rem;

margin-bottom: 5px;

}

.timeline-status p {

font-size: 0.9rem;

color: var(--gray);

}

/* Yield Prediction */

.yield-prediction {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.yield-chart {

height: 250px;

margin: 20px 0;

position: relative;

}

.yield-stats {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 15px;

margin-top: 20px;

}

.yield-stat {

text-align: center;

padding: 15px;

border-radius: 8px;

background-color: var(--light);

}

.yield-value {

font-size: 1.8rem;

font-weight: bold;

margin: 10px 0;

}

.yield-label {

font-size: 0.9rem;

color: var(--gray);

}

/* 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;

}

/* Factors Section */

.factors-section {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

margin-bottom: 30px;

}

.factors-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 15px;

margin-top: 20px;

}

.factor-card {

background-color: var(--light);

border-radius: 8px;

padding: 15px;

text-align: center;

}

.factor-icon {

font-size: 2rem;

margin-bottom: 10px;

}

.factor-value {

font-size: 1.2rem;

font-weight: bold;

margin: 5px 0;

}

.factor-status {

font-size: 0.8rem;

padding: 3px 8px;

border-radius: 20px;

display: inline-block;

}

.status-optimal {

background-color: #e8f5e9;

color: var(--success);

}

.status-warning {

background-color: #fff3e0;

color: var(--warning);

}

.status-critical {

background-color: #ffebee;

color: var(--danger);

}

/* Harvest Planning */

.planning-section {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.planning-options {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

margin-top: 20px;

}

.planning-card {

border: 1px solid #e0e0e0;

border-radius: 8px;

padding: 20px;

text-align: center;

transition: all 0.3s;

cursor: pointer;

}

.planning-card:hover {

border-color: var(--primary);

box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

.planning-card.selected {

border-color: var(--primary);

background-color: #e8f5e9;

}

.planning-icon {

font-size: 2.5rem;

color: var(--primary);

margin-bottom: 15px;

}

.planning-card h3 {

margin-bottom: 10px;

}

.planning-card p {

color: var(--gray);

font-size: 0.9rem;

margin-bottom: 15px;

}

.btn {

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-weight: 600;

transition: background 0.3s;

display: inline-flex;

align-items: center;

justify-content: center;

}

.btn i {

margin-right: 5px;

}

.btn-primary {

background-color: var(--primary);

color: white;

}

.btn-primary:hover {

background-color: var(--primary-dark);

}

.btn-outline {

background-color: transparent;

border: 1px solid var(--primary);

color: var(--primary);

}

.btn-outline:hover {

background-color: var(--light);

}

.planning-actions {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 30px;

}

/* 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>

</head>

<body>

<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><a href="field_monitoring.html" style="color: white; text-decoration: none;"><i class="fas fa-map-marked-alt"></i> Monitoring Lahan</a></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><a href="ai_recommendations.html" style="color: white; text-decoration: none;"><i class="fas fa-robot"></i> Rekomendasi AI</a></li>

<li class="active"><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>

<div>

</button>

<h1>Prediksi Panen</h1>

</div>

<span>Petani Smart</span>

</div>

</div>

<h3>Perkiraan Panen</h3>

<i class="fas fa-arrow-up"></i> 2 hari lebih awal

</div>

</div>

<h3>Prediksi Hasil</h3>

<i class="fas fa-arrow-up"></i> 12% dari rata-rata

</div>

</div>

<h3>Akurasi Prediksi</h3>

<i class="fas fa-arrow-up"></i> 5% lebih baik

</div>

</div>

<h3>Kualitas Prediksi</h3>

<div class="value">Tinggi</div>

Berdasarkan 45 data point

</div>

<h2>Timeline Panen</h2>

<i class="fas fa-download"></i> Ekspor

</button>

</div>

<h3>Penanaman</h3>

<p>Bibit padi varietas IR64 ditanam</p>

</div>

<h3>Pemupukan Ke-2</h3>

<p>Aplikasi pupuk NPK dan KCL</p>

</div>

<div class="timeline-date">Sekarang</div>

<h3>Fase Pembungaan</h3>

<p>Tanaman dalam kondisi optimal</p>

</div>

<h3>Panen Awal</h3>

<p>Perkiraan mulai panen area utara</p>

</div>

<h3>Puncak Panen</h3>

<p>Perkiraan hasil maksimal</p>

</div>

<h2>Prediksi Hasil Panen</h2>

<i class="fas fa-sync-alt"></i> Perbarui

</button>

</div>

</div>

<div class="yield-label">Rata-rata Historis</div>

<div class="yield-trend">Tahun lalu</div>

</div>

<div class="yield-label">Prediksi Saat Ini</div>

</div>

<h2>Pertumbuhan vs Rata-rata</h2>

</select>

</div>

</div>

<h2>Faktor Pengaruh Hasil</h2>

<option value="historical">Historikal</option>

</select>

</div>

</div>

<h2>Faktor yang Mempengaruhi Panen</h2>

<span>Berdasarkan analisis AI</span>

</div>

</div>

<div class="factor-label">Kelembaban Tanah</div>

<div class="factor-status status-optimal">Optimal</div>

</div>

</div>

<div class="factor-status status-optimal">Optimal</div>

</div>

</div>

<div class="factor-label">Kelembaban Udara</div>

<div class="factor-status status-warning">Tinggi</div>

</div>

</div>

<div class="factor-label">pH Tanah</div>

<div class="factor-status status-optimal">Ideal</div>

</div>

</div>

<div class="factor-label">Cahaya Matahari</div>

<div class="factor-status status-optimal">Cukup</div>

</div>

</div>

<div class="factor-label">Kalium (K)</div>

<div class="factor-status status-warning">Rendah</div>

</div>

<h2>Perencanaan Panen</h2>

<span>Pilih strategi panen berdasarkan prediksi</span>

</div>

</div>

<h3>Panen Awal</h3>

<p>Panen 5-7 hari lebih cepat dengan risiko hasil sedikit lebih rendah tetapi harga jual lebih tinggi</p>

<div class="factor-status status-warning">Hasil -8%</div>

</div>

</div>

<h3>Panen Optimal</h3>

<p>Panen pada waktu yang disarankan AI untuk hasil maksimal dengan kualitas terbaik</p>

<div class="factor-status status-optimal">Hasil Maksimal</div>

</div>

</div>

<h3>Panen Tertunda</h3>

<p>Panen 3-5 hari setelah waktu optimal dengan risiko kualitas menurun tetapi hasil sedikit lebih tinggi</p>

<div class="factor-status status-warning">Kualitas -5%</div>

</div>

<i class="fas fa-calendar-alt"></i> Jadwalkan Panen

</button>

<i class="fas fa-check-circle"></i> Konfirmasi Strategi

</button>

</div>

// Initialize when page loads

document.addEventListener('DOMContentLoaded', function() {

initCharts();

setupPlanningCards();

// 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';

});

}

});

// Initialize Charts

function initCharts() {

// Yield Prediction Chart

const yieldCtx = document.getElementById('yieldChart').getContext('2d');

const yieldChart = new Chart(yieldCtx, {

type: 'bar',

data: {

labels: ['Area Utara', 'Area Timur', 'Area Selatan', 'Area Barat'],

datasets: [{

label: 'Prediksi Hasil (ton/ha)',

data: [8.2, 7.5, 7.9, 7.6],

backgroundColor: [

'rgba(76, 175, 80, 0.7)',

'rgba(76, 175, 80, 0.7)'

borderColor: [

'rgba(76, 175, 80, 1)',

'rgba(76, 175, 80, 1)'

borderWidth: 1

}]

options: {

responsive: true,

maintainAspectRatio: false,

scales: {

y: {

beginAtZero: true,

max: 10,

title: {

display: true,

text: 'Ton per Hektar'

}

plugins: {

legend: {

display: false

tooltip: {

callbacks: {

label: function(context) {

return `Prediksi: ${context.parsed.y} ton/ha`;

}

});

// Growth vs Average Chart

const growthCtx = document.getElementById('growthCanvas').getContext('2d');

const growthChart = new Chart(growthCtx, {

type: 'line',

data: {

labels: ['Minggu 1', 'Minggu 2', 'Minggu 3', 'Minggu 4', 'Minggu 5', 'Minggu 6', 'Minggu 7', 'Minggu 8', 'Minggu 9', 'Minggu 10', 'Minggu 11', 'Minggu 12'],

datasets: [

{

label: 'Pertumbuhan Saat Ini',

data: [10, 25, 40, 55, 65, 75, 82, 88, 92, 95, 97, 98],

borderColor: '#4caf50',

backgroundColor: 'rgba(76, 175, 80, 0.1)',

borderWidth: 2,

fill: true,

tension: 0.4

{

label: 'Rata-rata Historis',

data: [12, 28, 45, 58, 68, 76, 83, 87, 90, 93, 95, 96],

borderColor: '#ff9800',

backgroundColor: 'rgba(255, 152, 0, 0.1)',

borderWidth: 2,

fill: false,

tension: 0.4,

borderDash: [5, 5]

}

]

options: {

responsive: true,

maintainAspectRatio: false,

scales: {

y: {

beginAtZero: true,

max: 100,

title: {

display: true,

text: 'Persentase Pertumbuhan'

}

plugins: {

legend: {

display: true,

position: 'top'

}

});

// Factors Influence Chart

const factorsCtx = document.getElementById('factorsCanvas').getContext('2d');

const factorsChart = new Chart(factorsCtx, {

type: 'doughnut',

data: {

labels: ['Kondisi Tanah', 'Cuaca', 'Pemupukan', 'Irigasi', 'Kesehatan Tanaman'],

datasets: [{

data: [35, 25, 20, 15, 5],

backgroundColor: [

'rgba(76, 175, 80, 0.7)',

'rgba(33, 150, 243, 0.7)',

'rgba(255, 152, 0, 0.7)',

'rgba(156, 39, 176, 0.7)',

'rgba(244, 67, 54, 0.7)'

borderColor: [

'rgba(76, 175, 80, 1)',

'rgba(33, 150, 243, 1)',

'rgba(255, 152, 0, 1)',

'rgba(156, 39, 176, 1)',

'rgba(244, 67, 54, 1)'

borderWidth: 1

}]

options: {

responsive: true,

maintainAspectRatio: false,

plugins: {

legend: {

position: 'bottom'

tooltip: {

callbacks: {

label: function(context) {

return `${context.label}: ${context.parsed}% pengaruh`;

}

});

// Update charts when range selector changes

document.getElementById('growthRange').addEventListener('change', function() {

// In a real app, this would fetch new data based on the selected range

console.log('Growth range changed to:', this.value);

});

document.getElementById('factorsRange').addEventListener('change', function() {

// In a real app, this would fetch new data based on the selected range

console.log('Factors range changed to:', this.value);

});

}

// Setup planning cards selection

function setupPlanningCards() {

const planningCards = document.querySelectorAll('.planning-card');

planningCards.forEach(card => {

card.addEventListener('click', function() {

// Remove selected class from all cards

planningCards.forEach(c => c.classList.remove('selected'));

// Add selected class to clicked card

this.classList.add('selected');

// Update yield prediction based on selection

updateYieldPrediction(this.id);

});

}

// Update yield prediction based on harvest strategy

function updateYieldPrediction(strategyId) {

const yieldValue = document.querySelector('.yield-value');

const yieldTrend = document.querySelector('.yield-trend');

switch(strategyId) {

case 'earlyHarvest':

yieldValue.textContent = '7.2 ton/ha';

yieldTrend.textContent = 'Hasil -8%';

break;

case 'optimalHarvest':

yieldValue.textContent = '7.8 ton/ha';

yieldTrend.textContent = 'Hasil Maksimal';

break;

case 'lateHarvest':

yieldValue.textContent = '7.9 ton/ha';

yieldTrend.textContent = 'Kualitas -5%';

break;

}

// Simulate real-time data updates

function updatePredictionData() {

// In a real app, this would fetch data from an API

// For demo purposes, we'll simulate small changes

// Update days to harvest with small random variation

const daysElement = document.querySelector('.prediction-overview .value');

const currentDays = parseInt(daysElement.textContent);

const newDays = Math.max(15, Math.min(21, currentDays + (Math.random() * 2 - 1)));

daysElement.textContent = Math.round(newDays) + ' Hari';

// Update prediction accuracy with small random variation

const accuracyElement = document.querySelectorAll('.prediction-overview .value')[2];

const currentAccuracy = parseInt(accuracyElement.textContent);

const newAccuracy = Math.max(85, Math.min(95, currentAccuracy + (Math.random() * 2 - 1)));

accuracyElement.textContent = Math.round(newAccuracy) + '%';

console.log('Prediction data updated');

}

// Update data every 30 seconds

setInterval(updatePredictionData, 30000);

</script>

</body>

</html>

```

Fitur Halaman Harvest Prediction:

1. Ringkasan Prediksi - Kartu overview dengan informasi utama:

· Perkiraan waktu panen

· Prediksi hasil panen

· Akurasi prediksi AI

· Kualitas prediksi

2. Timeline Panen Interaktif - Visualisasi timeline perkembangan tanaman:

· Fase penanaman, pemupukan, pembungaan, dan panen

· Status saat ini (current) dan prediksi masa depan

· Marker visual dengan kode warna

3. Prediksi Hasil Panen - Grafik batang dengan prediksi per area:

· Perbandingan hasil antar area lahan

· Statistik perbandingan dengan rata-rata historis

4. Grafik Pertumbuhan - Perbandingan pertumbuhan saat ini vs rata-rata historis:

· Line chart dengan dua dataset

· Indikator performa relatif

5. Analisis Faktor Pengaruh - Visualisasi faktor yang mempengaruhi hasil:

· Doughnut chart persentase pengaruh

· Kartu indikator untuk setiap faktor (tanah, cuaca, dll)

· Status dengan kode warna (optimal, warning, critical)

6. Perencanaan Strategi Panen - Opsi strategi panen:

· Panen awal (hasil lebih rendah, harga lebih tinggi)

· Panen optimal (hasil maksimal, kualitas terbaik)

· Panen tertunda (hasil lebih tinggi, kualitas menurun)

· Interaksi untuk memilih strategi

7. Update Real-time - Pembaruan data prediksi secara berkala

8. Desain Responsif - Tampilan optimal di semua perangkat

Halaman ini memberikan alat prediksi yang komprehensif untuk membantu petani merencanakan panen dengan lebih akurat, memaksimalkan hasil, dan mengoptimalkan waktu panen berdasarkan analisis data dan AI.

Bersambung ke: Kode Isi File reports.html

Search This Blog

Aplikasi FarmerSmartAI

Kode Isi File harvest_prediction.html

Comments

Post a Comment

Popular posts from this blog

logo-placeholder.html

Aplikasi FarmerSmartAI:

icon-generator.html