Kode Isi File ai_recommendations.html

Kode Isi File ai_recommendations.html

Bantu buatkan kode isi file ai_recommendations.html

<!DOCTYPE html>

<head>

<title>Rekomendasi AI - 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;

}

/* AI Status */

.ai-status {

background: linear-gradient(135deg, var(--primary), var(--primary-dark));

color: white;

border-radius: 10px;

padding: 20px;

margin-bottom: 30px;

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

display: flex;

align-items: center;

justify-content: space-between;

}

.ai-status-content h2 {

font-size: 1.5rem;

margin-bottom: 10px;

}

.ai-status-content p {

opacity: 0.9;

max-width: 600px;

}

.ai-indicator {

display: flex;

align-items: center;

background-color: rgba(255,255,255,0.2);

padding: 10px 15px;

border-radius: 20px;

}

.ai-pulse {

width: 12px;

height: 12px;

background-color: var(--accent);

border-radius: 50%;

margin-right: 8px;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { transform: scale(0.95); opacity: 1; }

50% { transform: scale(1.1); opacity: 0.7; }

100% { transform: scale(0.95); opacity: 1; }

}

/* Recommendations Grid */

.recommendations-grid {

display: grid;

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

gap: 20px;

margin-bottom: 30px;

}

.recommendation-card {

background: white;

border-radius: 10px;

overflow: hidden;

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

transition: transform 0.3s, box-shadow 0.3s;

}

.recommendation-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 15px rgba(0,0,0,0.1);

}

.card-header {

padding: 15px 20px;

display: flex;

align-items: center;

border-bottom: 1px solid #f0f0f0;

}

.card-icon {

width: 40px;

height: 40px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-right: 15px;

font-size: 1.2rem;

}

.irrigation .card-icon {

background-color: #e3f2fd;

color: #2196f3;

}

.fertilization .card-icon {

background-color: #e8f5e9;

color: var(--success);

}

.pest-control .card-icon {

background-color: #fff3e0;

color: var(--warning);

}

.harvest .card-icon {

background-color: #f3e5f5;

color: #9c27b0;

}

.card-header h3 {

font-size: 1.2rem;

color: var(--dark);

}

.card-priority {

margin-left: auto;

padding: 5px 10px;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

}

.priority-high {

background-color: #ffebee;

color: var(--danger);

}

.priority-medium {

background-color: #fff3e0;

color: var(--warning);

}

.priority-low {

background-color: #e8f5e9;

color: var(--success);

}

.card-body {

padding: 20px;

}

.card-body p {

margin-bottom: 15px;

color: var(--gray);

line-height: 1.5;

}

.recommendation-details {

background-color: var(--light);

padding: 15px;

border-radius: 8px;

margin-bottom: 15px;

}

.detail-item {

display: flex;

justify-content: space-between;

margin-bottom: 8px;

padding-bottom: 8px;

border-bottom: 1px solid rgba(0,0,0,0.05);

}

.detail-item:last-child {

margin-bottom: 0;

padding-bottom: 0;

border-bottom: none;

}

.detail-label {

color: var(--gray);

}

.detail-value {

font-weight: 600;

}

.card-actions {

display: flex;

gap: 10px;

}

.btn {

padding: 8px 15px;

border: none;

border-radius: 5px;

cursor: pointer;

font-weight: 600;

transition: background 0.3s;

flex: 1;

display: 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);

}

/* Disease Detection */

.disease-section {

background: white;

border-radius: 10px;

padding: 20px;

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

margin-bottom: 30px;

}

.section-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.section-header h2 {

color: var(--primary);

font-size: 1.5rem;

}

.disease-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;

}

@media (max-width: 768px) {

.disease-container {

grid-template-columns: 1fr;

}

.disease-upload {

border: 2px dashed #ddd;

border-radius: 8px;

padding: 30px;

text-align: center;

cursor: pointer;

transition: border-color 0.3s;

}

.disease-upload:hover {

border-color: var(--primary);

}

.upload-icon {

font-size: 3rem;

color: var(--gray);

margin-bottom: 15px;

}

.disease-result {

background-color: var(--light);

border-radius: 8px;

padding: 20px;

}

.disease-status {

display: flex;

align-items: center;

margin-bottom: 15px;

}

.status-indicator {

width: 12px;

height: 12px;

border-radius: 50%;

margin-right: 10px;

}

.status-healthy {

background-color: var(--success);

}

.status-infected {

background-color: var(--danger);

}

.disease-info h3 {

margin-bottom: 10px;

}

.disease-solution {

margin-top: 15px;

padding: 15px;

background-color: white;

border-radius: 8px;

}

.disease-solution h4 {

margin-bottom: 10px;

color: var(--primary);

}

/* Predictive Analytics */

.analytics-section {

background: white;

border-radius: 10px;

padding: 20px;

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

margin-bottom: 30px;

}

.analytics-cards {

display: grid;

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

gap: 20px;

margin-bottom: 20px;

}

.analytics-card {

background: var(--light);

border-radius: 8px;

padding: 20px;

text-align: center;

}

.analytics-value {

font-size: 2rem;

font-weight: bold;

margin: 10px 0;

}

.analytics-label {

color: var(--gray);

font-size: 0.9rem;

}

.confidence-meter {

margin-top: 10px;

height: 6px;

background-color: #e0e0e0;

border-radius: 3px;

overflow: hidden;

}

.confidence-fill {

height: 100%;

background-color: var(--success);

border-radius: 3px;

}

.confidence-high {

background-color: var(--success);

}

.confidence-medium {

background-color: var(--warning);

}

.confidence-low {

background-color: var(--danger);

}

/* Action History */

.history-section {

background: white;

border-radius: 10px;

padding: 20px;

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

}

.history-list {

display: flex;

flex-direction: column;

gap: 15px;

}

.history-item {

display: flex;

align-items: center;

padding: 15px;

border-radius: 8px;

background-color: var(--light);

}

.history-icon {

width: 40px;

height: 40px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-right: 15px;

font-size: 1.2rem;

}

.history-content {

flex: 1;

}

.history-content h3 {

font-size: 1rem;

margin-bottom: 5px;

}

.history-content p {

font-size: 0.9rem;

color: var(--gray);

}

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

}

.recommendations-grid {

grid-template-columns: 1fr;

}

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

<div>

</button>

<h1>Rekomendasi AI</h1>

</div>

<span>Petani Smart</span>

</div>

<h2>Asisten AI Pertanian Anda</h2>

<p>FarmerSmartAI menganalisis data sensor, kondisi cuaca, dan kesehatan tanaman untuk memberikan rekomendasi yang dipersonalisasi untuk meningkatkan produktivitas lahan Anda.</p>

</div>

<span>Aktif & Menganalisis</span>

</div>

</div>

<h3>Rekomendasi Irigasi</h3>

<div class="card-priority priority-high">PRIORITAS TINGGI</div>

</div>

<p>Berdasarkan data kelembaban tanah dan prakiraan cuaca, sistem merekomendasikan penyesuaian jadwal irigasi.</p>

<span class="detail-label">Kelembaban Tanah Saat Ini</span>

</div>

<span class="detail-label">Level Optimal</span>

</div>

<span class="detail-label">Rekomendasi</span>

<span class="detail-value">Tambah durasi irigasi 15 menit</span>

</div>

<span class="detail-label">Waktu Terbaik</span>

<span class="detail-value">Besok pagi (06:00-08:00)</span>

</div>

<i class="fas fa-check"></i> Terapkan

</button>

<i class="fas fa-info-circle"></i> Detail

</button>

</div>

</div>

<h3>Rekomendasi Pemupukan</h3>

<div class="card-priority priority-medium">PRIORITAS SEDANG</div>

</div>

<p>Analisis tanah menunjukkan ketidakseimbangan nutrisi yang dapat mempengaruhi pertumbuhan tanaman.</p>

<span class="detail-label">Kalium (K)</span>

<span class="detail-value">Rendah (35 ppm)</span>

</div>

<span class="detail-label">Nitrogen (N)</span>

<span class="detail-value">Optimal (42 ppm)</span>

</div>

<span class="detail-label">Rekomendasi Pupuk</span>

</div>

<span class="detail-label">Dosis</span>

<span class="detail-value">100 kg/hektar</span>

</div>

<i class="fas fa-check"></i> Terapkan

</button>

<i class="fas fa-info-circle"></i> Detail

</button>

</div>

</div>

<h3>Peringatan Hama</h3>

<div class="card-priority priority-high">PRIORITAS TINGGI</div>

</div>

<p>Sistem mendeteksi kondisi yang menguntungkan untuk perkembangan hama wereng batang coklat.</p>

<span class="detail-label">Hama Terdeteksi</span>

<span class="detail-value">Wereng Batang Coklat</span>

</div>

<span class="detail-label">Tingkat Risiko</span>

<span class="detail-value">Tinggi (78%)</span>

</div>

<span class="detail-label">Faktor Risiko</span>

<span class="detail-value">Kelembaban tinggi</span>

</div>

<span class="detail-label">Rekomendasi</span>

<span class="detail-value">Pestisida sistemik</span>

</div>

<i class="fas fa-check"></i> Terapkan

</button>

<i class="fas fa-info-circle"></i> Detail

</button>

</div>

</div>

<h3>Prediksi Panen</h3>

<div class="card-priority priority-low">INFORMASI</div>

</div>

<p>Berdasarkan pertumbuhan tanaman dan kondisi lingkungan, berikut prediksi waktu panen optimal.</p>

<span class="detail-label">Perkiraan Panen</span>

</div>

<span class="detail-label">Prediksi Hasil</span>

<span class="detail-value">7.8 ton/hektar</span>

</div>

<span class="detail-label">Kualitas</span>

<span class="detail-value">Tinggi (89%)</span>

</div>

<span class="detail-label">Rekomendasi</span>

<span class="detail-value">Stop pemupukan N</span>

</div>

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

</button>

<i class="fas fa-info-circle"></i> Detail

</button>

</div>

<h2>Deteksi Penyakit Tanaman</h2>

<i class="fas fa-history"></i> Riwayat Scan

</button>

</div>

</div>

<h3>Unggah Foto Tanaman</h3>

<p>Seret atau klik untuk mengunggah foto daun/tanaman untuk analisis penyakit</p>

</div>

<h3>Tanaman Sehat</h3>

</div>

<p>Analisis terakhir: 2 hari yang lalu - Tidak terdeteksi penyakit</p>

<h4>Tips Pencegahan:</h4>

<ul>

<li>Pertahankan sirkulasi udara yang baik</li>

<li>Hindari kelembaban berlebihan pada daun</li>

<li>Gunakan pupuk seimbang</li>

<li>Pantau secara berkala</li>

</ul>

</div>

<h2>Analisis Prediktif</h2>

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

</button>

</div>

<div class="analytics-label">Akurasi Rekomendasi</div>

</div>

<div class="analytics-label">Penghematan Air</div>

</div>

<div class="analytics-label">Peningkatan Hasil</div>

</div>

<div class="analytics-label">Pengurangan Pestisida</div>

</div>

*Berdasarkan analisis data historis 6 bulan terakhir

</p>

</div>

<h2>Riwayat Tindakan</h2>

<i class="fas fa-filter"></i> Filter

</button>

</div>

</div>

<h3>Jadwal Irigasi Disesuaikan</h3>

<p>Durasi irigasi ditambah 10 menit berdasarkan rekomendasi AI</p>

</div>

</div>

</div>

<h3>Pemupukan Kalium</h3>

<p>Pengaplikasian KCl 100 kg/hektar di lahan utara</p>

</div>

</div>

</div>

<h3>Pencegahan Hama</h3>

<p>Pengaplikasian pestisida sistemik untuk wereng</p>

</div>

</div>

</div>

<h3>Penjadwalan Panen</h3>

<p>Panen dijadwalkan ulang berdasarkan prediksi AI</p>

</div>

</div>

// Initialize when page loads

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

// File upload for disease detection

const diseaseUpload = document.getElementById('diseaseUpload');

const fileInput = document.getElementById('fileInput');

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

fileInput.click();

});

fileInput.addEventListener('change', function(e) {

if (e.target.files.length > 0) {

// Simulate AI analysis

simulateDiseaseAnalysis();

}

});

// Apply recommendation buttons

const applyButtons = document.querySelectorAll('.btn-primary');

applyButtons.forEach(button => {

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

const card = this.closest('.recommendation-card');

const title = card.querySelector('h3').textContent;

// Show success message

alert(`Rekomendasi "${title}" berhasil diterapkan!`);

// Add to history (in a real app, this would be an API call)

addToHistory(title);

});

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

});

}

});

// Simulate disease analysis

function simulateDiseaseAnalysis() {

const diseaseResult = document.querySelector('.disease-result');

const statusIndicator = diseaseResult.querySelector('.status-indicator');

const statusTitle = diseaseResult.querySelector('h3');

const statusDesc = diseaseResult.querySelector('p');

const solutionDiv = diseaseResult.querySelector('.disease-solution');

// Show loading state

statusIndicator.className = 'status-indicator';

statusIndicator.style.backgroundColor = '#ff9800';

statusTitle.textContent = 'Menganalisis...';

statusDesc.textContent = 'AI sedang menganalisis gambar yang diunggah';

solutionDiv.innerHTML = '';

// Simulate API call delay

setTimeout(function() {

// Random result for demo (80% healthy, 20% infected)

const isHealthy = Math.random() > 0.2;

if (isHealthy) {

statusIndicator.className = 'status-indicator status-healthy';

statusTitle.textContent = 'Tanaman Sehat';

statusDesc.textContent = 'Analisis selesai - Tidak terdeteksi penyakit';

solutionDiv.innerHTML = `

<h4>Tips Pencegahan:</h4>

<ul>

<li>Pertahankan sirkulasi udara yang baik</li>

<li>Hindari kelembaban berlebihan pada daun</li>

<li>Gunakan pupuk seimbang</li>

<li>Pantau secara berkala</li>

</ul>

} else {

statusIndicator.className = 'status-indicator status-infected';

statusTitle.textContent = 'Penyakit Terdeteksi';

statusDesc.textContent = 'Analisis selesai - Terdeteksi: Hawar Daun Bakteri';

solutionDiv.innerHTML = `

<h4>Rekomendasi Penanganan:</h4>

<ul>

<li>Pisahkan tanaman yang terinfeksi</li>

<li>Semprot dengan bakterisida tembaga</li>

<li>Kurangi penyiraman overhead</li>

<li>Buang daun yang terinfeksi parah</li>

</ul>

}

}, 3000);

}

// Add applied recommendation to history

function addToHistory(title) {

const historyList = document.querySelector('.history-list');

const now = new Date();

const timeString = now.getHours().toString().padStart(2, '0') + ':' +

now.getMinutes().toString().padStart(2, '0');

const historyItem = document.createElement('div');

historyItem.className = 'history-item';

// Determine icon based on title

let iconClass = 'fas fa-check-circle';

let iconBgColor = '#e8f5e9';

let iconColor = '#4caf50';

if (title.includes('Irigasi')) {

iconClass = 'fas fa-tint';

iconBgColor = '#e3f2fd';

iconColor = '#2196f3';

} else if (title.includes('Pemupukan')) {

iconClass = 'fas fa-flask';

iconBgColor = '#e8f5e9';

iconColor = '#4caf50';

} else if (title.includes('Hama')) {

iconClass = 'fas fa-bug';

iconBgColor = '#fff3e0';

iconColor = '#ff9800';

} else if (title.includes('Panen')) {

iconClass = 'fas fa-sickle';

iconBgColor = '#f3e5f5';

iconColor = '#9c27b0';

}

historyItem.innerHTML = `

</div>

<h3>${title} Diterapkan</h3>

<p>Rekomendasi AI telah diterapkan ke sistem</p>

</div>

// Add to top of history

historyList.insertBefore(historyItem, historyList.firstChild);

// Limit history to 10 items

if (historyList.children.length > 10) {

historyList.removeChild(historyList.lastChild);

}

</script>

</body>

</html>

Bersambung ke: kode isi file harvest_prediction.html

Search This Blog

Aplikasi FarmerSmartAI

Kode Isi File ai_recommendations.html

Comments

Post a Comment

Popular posts from this blog

logo-placeholder.html

Aplikasi FarmerSmartAI:

icon-generator.html