Kode Isi File settings.html

Kode Isi File settings.html

Bantu buatkan kode isi file settings.html

FarmerSmartAI - Halaman Pengaturan

Berikut kode lengkap untuk file settings.html (halaman pengaturan) FarmerSmartAI:

```html

<!DOCTYPE html>

<title>Pengaturan - FarmerSmartAI</title>

<gaya>

:akar {

--utama: #2e7d32;

--primary-dark: #1b5e20;

--primary-light: #4caf50;

--sekunder: #ff9800;

--aksen: #8bc34a;

--cahaya: #f5f5f5;

--gelap: #333;

--abu-abu: #757575;

--putih: #ffffff;

--peringatan: #ff9800;

--bahaya: #f44336;

--sukses: #4caf50;

--info: #2196f3;

}

* {

batas: 0;

bantalan: 0;

ukuran kotak: kotak batas;

font-family: 'Segoe UI', Tahoma, Jenewa, Verdana, sans-serif;

}

tubuh {

warna latar belakang: #f0f4f0;

warna: var(--gelap);

}

.dasbor {

tampilan: kisi;

grid-template-columns: 250px 1fr;

tinggi min: 100vh;

}

/* Bilah Samping */

.bilah sisi {

warna latar belakang: var(--primer);

warna: putih;

bantalan: 20px 0;

}

.logo {

tampilan: fleksibel;

align-items: tengah;

bantalan: 0 20px 20px;

border-bottom: 1px solid rgba(255,255,255,0.1);

margin-bawah: 20px;

}

.logo-ikon {

ukuran font: 2rem;

margin-kanan: 10px;

}

.logo h1 {

ukuran font: 1.5rem;

}

.sidebar ul {

gaya-daftar: tidak ada;

}

.sidebar li {

bantalan: 15px 20px;

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

kursor: penunjuk;

transisi: latar belakang 0,3 detik;

tampilan: fleksibel;

align-items: tengah;

}

.sidebar li i {

margin-kanan: 10px;

lebar: 20px;

teks-ratakan: tengah;

}

.sidebar li:hover {

warna latar belakang: var(--primary-dark);

}

.sidebar li.aktif {

warna latar belakang: var(--primary-dark);

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

}

/* Konten Utama */

.konten-utama {

bantalan: 20px;

overflow-y: otomatis;

}

.judul {

tampilan: fleksibel;

justify-content: spasi-antara;

align-items: tengah;

margin-bawah: 25px;

padding-bawah: 15px;

border-bottom: 1px solid #e0e0e0;

}

.header h1 {

warna: var(--primer);

ukuran font: 1.8rem;

}

.info-pengguna {

tampilan: fleksibel;

align-items: tengah;

}

.avatar-pengguna {

lebar: 40px;

tinggi: 40px;

radius batas: 50%;

warna latar belakang: var(--primer);

tampilan: fleksibel;

align-items: tengah;

justify-content: tengah;

warna: putih;

font-weight: tebal;

margin-kanan: 10px;

}

/* Tab Pengaturan */

.pengaturan-tab {

tampilan: fleksibel;

latar belakang: putih;

radius batas: 10px 10px 0 0;

overflow: tersembunyi;

bayangan kotak: 0 4px 6px rgba(0,0,0,0.1);

}

.tab {

bantalan: 15px 20px;

kursor: penunjuk;

transisi: latar belakang 0,3 detik;

border-bottom: 3px padat transparan;

berat font: 500;

}

.tab:arahkan kursor {

warna latar belakang: var(--terang);

}

.tab.aktif {

border-bottom: 3px solid var(--primary);

warna: var(--primer);

}

/* Pengaturan Konten */

.pengaturan-konten {

latar belakang: putih;

radius batas: 0 0 10px 10px;

bantalan: 30 piksel;

bayangan kotak: 0 4px 6px rgba(0,0,0,0.1);

margin-bawah: 30px;

}

.tab-konten {

tampilan: tidak ada;

}

.tab-konten.aktif {

tampilan: blok;

}

.bagian-pengaturan {

margin-bawah: 30px;

padding-bawah: 20px;

border-bottom: 1px solid #f0f0f0;

}

.bagian-pengaturan:anak-terakhir {

border-bottom: tidak ada;

margin-bawah: 0;

}

.header-bagian {

tampilan: fleksibel;

justify-content: spasi-antara;

align-items: tengah;

margin-bawah: 20px;

}

.header-bagian h2 {

warna: var(--primer);

ukuran font: 1.4rem;

}

.deskripsi-bagian {

warna: var(--gray);

margin-bawah: 20px;

}

/* Gaya Formulir */

.form-group {

margin-bawah: 20px;

}

.form-row {

tampilan: fleksibel;

celah: 20px;

margin-bawah: 20px;

}

.form-row .form-group {

fleksibel: 1;

margin-bawah: 0;

}

.form-label {

tampilan: blok;

margin-bawah: 8px;

berat font: 500;

warna: var(--gelap);

}

.kontrol-formulir {

lebar: 100%;

bantalan: 12px 15px;

batas: 1px padat #ddd;

radius batas: 5px;

ukuran font: 1rem;

transisi: batas 0,3 detik, bayangan kotak 0,3 detik;

}

.form-control:fokus {

warna batas: var(--primer);

bayangan kotak: 0 0 0 2px rgba(46, 125, 50, 0.2);

garis besar: tidak ada;

}

.form-teks {

ukuran font: 0.85rem;

warna: var(--gray);

margin-atas: 5px;

}

/* Alihkan Sakelar */

.toggle-group {

tampilan: fleksibel;

justify-content: spasi-antara;

align-items: tengah;

bantalan: 15px 0;

border-bottom: 1px solid #f0f0f0;

}

.toggle-group:anak-terakhir {

border-bottom: tidak ada;

}

.toggle-label {

fleksibel: 1;

}

.toggle-label h3 {

ukuran font: 1rem;

margin-bawah: 5px;

}

.toggle-label p {

ukuran font: 0.9rem;

warna: var(--gray);

}

.alih-alih {

posisi: relatif;

tampilan: blok-sebaris;

lebar: 50px;

tinggi: 24px;

}

.masukan sakelar-alih {

opasitas: 0;

lebar: 0;

tinggi: 0;

}

.penggeser {

posisi: absolut;

kursor: penunjuk;

atas: 0;

kiri: 0;

kanan: 0;

bawah: 0;

warna latar belakang: #ccc;

transisi: .4s;

radius batas: 24px;

}

.slider:sebelum {

posisi: absolut;

isi: "";

tinggi: 16px;

lebar: 16px;

kiri: 4px;

bawah: 4px;

warna latar belakang: putih;

transisi: .4s;

radius batas: 50%;

}

masukan:diperiksa + .slider {

warna latar belakang: var(--primer);

}

input:diperiksa + .slider:sebelum {

transformasi: translateX(26px);

}

/* Gaya Tombol */

.btn {

bantalan: 10px 20px;

perbatasan: tidak ada;

radius batas: 5px;

kursor: penunjuk;

berat font: 600;

transisi: latar belakang 0,3 detik;

tampilan: inline-flex;

align-items: tengah;

justify-content: tengah;

}

.btn i {

margin-kanan: 5px;

}

.btn-primer {

warna latar belakang: var(--primer);

warna: putih;

}

.btn-primer:arahkan kursor {

warna latar belakang: var(--primary-dark);

}

.btn-garis besar {

warna latar belakang: transparan;

batas: 1px solid var(--primer);

warna: var(--primer);

}

.btn-garis besar:arahkan kursor {

warna latar belakang: var(--terang);

}

.btn-bahaya {

warna latar belakang: var(--bahaya);

warna: putih;

}

.btn-bahaya:arahkan kursor {

warna latar belakang: #d32f2f;

}

.tombol-tindakan {

tampilan: fleksibel;

celah: 15px;

margin-atas: 30px;

justify-content: flex-end;

}

/* Perangkat IoT */

.perangkat-jaringan {

tampilan: kisi;

grid-template-columns: ulangi(pengisian-otomatis, minmaks(250px, 1fr));

celah: 20px;

margin-atas: 20px;

}

.kartu-perangkat {

batas: 1px padat #e0e0e0;

radius batas: 8px;

bantalan: 20px;

transisi: semua 0,3 detik;

}

.kartu-perangkat:arahkan kursor {

warna batas: var(--primer);

bayangan kotak: 0 4px 8px rgba(0,0,0,0.1);

}

.header-perangkat {

tampilan: fleksibel;

align-items: tengah;

margin-bawah: 15px;

}

.ikon-perangkat {

lebar: 40px;

tinggi: 40px;

radius batas: 50%;

tampilan: fleksibel;

align-items: tengah;

justify-content: tengah;

margin-kanan: 15px;

ukuran font: 1.2rem;

warna: putih;

}

.icon-perangkat.kelembapan {

warna latar belakang: #2196f3;

}

.ikon-perangkat.suhu {

warna latar belakang: #ff5722;

}

.icon-perangkat.kelembapan {

warna latar belakang: #009688;

}

.icon-perangkat.ph {

warna latar belakang: #9c27b0;

}

.info-perangkat h3 {

ukuran font: 1.1rem;

margin-bawah: 5px;

}

.status-perangkat {

ukuran font: 0.8rem;

bantalan: 3px 8px;

radius batas: 20px;

tampilan: blok-sebaris;

}

.status-online {

warna latar belakang: #e8f5e9;

warna: var(--sukses);

}

.status-offline {

warna latar belakang: #ffebee;

warna: var(--danger);

}

.tindakan-perangkat {

tampilan: fleksibel;

celah: 10px;

margin-atas: 15px;

}

/* Gaya Peringatan */

.peringatan {

bantalan: 15 piksel;

radius batas: 5px;

margin-bawah: 20px;

tampilan: tidak ada;

}

.alert-success {

warna latar belakang: #e8f5e9;

batas: 1px solid var(--sukses);

warna: var(--sukses);

}

.alert-error {

warna latar belakang: #ffebee;

batas: 1px solid var(--bahaya);

warna: var(--danger);

}

/* Desain Responsif */

@media (lebar maks: 768 piksel) {

.dasbor {

grid-template-columns: 1fr;

}

.bilah sisi {

tampilan: tidak ada;

}

.tombol-menu-seluler {

tampilan: blok;

latar belakang: tidak ada;

perbatasan: tidak ada;

ukuran font: 1.5rem;

warna: var(--primer);

kursor: penunjuk;

}

.pengaturan-tab {

arah-fleksibel: kolom;

}

.form-row {

arah-fleksibel: kolom;

celah: 0;

}

.tombol-tindakan {

arah-fleksibel: kolom;

}

.tombol-menu-seluler {

tampilan: tidak ada;

}

</gaya>

</head>

<tubuh>

<h1>Petani Cerdas AI</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> Pemantauan Lahan</a></li>

<li><a href="farmer_smart_ai_dashboard.html" style="color: white; text-decoration: none;"><i class="fas fa-tachometer-alt"></i> Dasbor</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><a href="harvest_prediction.html" style="color: white; text-decoration: none;"><i class="fas fa-chart-line"></i> Prediksi Panel</a></li>

<li><a href="reports.html" style="color: white; text-decoration: none;"><i class="fas fa-clipboard-list"></i> Laporan</a></li>

<li class="active"><i class="fas fa-cog"></i> Pengaturan</li>

Bahasa Indonesia:

</div>

<div>

</tombol>

<h1>Pengaturan</h1>

</div>

<span>Petani Pintar</span>

</div>

<i class="fas fa-check-circle"></i> <span id="successMessage">Pengaturan berhasil disimpan!</span>

</div>

<i class="fas fa-exclamation-circle"></i> <span id="errorMessage">Terjadi kesalahan saat menyimpan pengaturan.</span>

</div>

<div class="tab active" data-tab="account">Akun & Profil</div>

<div class="tab" data-tab="notifications">Pemberitahuan</div>

<div class="tab" data-tab="iot">Perangkat IoT</div>

<div class="tab" data-tab="integrations">Integrasi</div>

<div class="tab" data-tab="security">Keamanan</div>

<div class="tab" data-tab="preferences">Preferensi</div>

</div>

<h2>Informasi Profil</h2>

</div>

<p class="section-description">Kelola informasi profil Anda dan bagaimana informasi tersebut muncul di platform FarmerSmartAI.</p>

<label class="form-label" for="firstName">Nama Depan</label>

</div>

<label class="form-label" for="lastName">Nama Belakang</label>

</div>

<label class="form-label" untuk="email">Email</label>

<div class="form-text">Alamat email digunakan untuk login dan notifikasi.</div>

</div>

<label class="form-label" for="phone">Nomor Telepon</label>

</div>

<label class="form-label" for="farmName">Nama Lahan/Peternakan</label>

</div>

<label class="form-label" for="farmLocation">Lokasi Lahan</label>

</div>

Bahasa Indonesia:

<h2>Foto Profil</h2>

</div>

<div>

<i class="fas fa-upload"></i> Unggah Foto Baru

</tombol>

<i class="fas fa-trash"></i> Hapus

</tombol>

</div>

<div class="form-text">Format yang didukung: JPG, PNG. Ukuran maksimal: 5MB.</div>

</div>

Bahasa Indonesia:

</div>

<h2>Pemberitahuan Preferensi</h2>

</div>

<p class="section-description">Atur bagaimana Anda ingin menerima notifikasi dari FarmerSmartAI.</p>

<h3>Notifikasi Email</h3>

<p>Kirim notifikasi melalui email</p>

</div>

</label>

</div>

<h3>Notifikasi Browser</h3>

<p>Tampilkan notifikasi di web browser</p>

</div>

</label>

</div>

<h3>Notifikasi SMS</h3>

<p>Kirim notifikasi penting melalui SMS</p>

</div>

</label>

</div>

Bahasa Indonesia:

<h2>Jenis Notifikasi</h2>

</div>

<h3>Peringatan Cuaca</h3>

<p>Pemberitahuan tentang perubahan cuaca ekstrem</p>

</div>

</label>

</div>

<h3>Rekomendasi AI</h3>

<p>Notifikasi ketika ada rekomendasi baru dari AI</p>

</div>

</label>

</div>

<h3>Sensor Peringatan</h3>

<p>Pemberitahuan ketika sensor mendeteksi kondisi tidak normal</p>

</div>

</label>

</div>

<h3>Pembaruan Sistem</h3>

<p>Pemberitahuan tentang pembaruan dan pemeliharaan sistem</p>

</div>

</label>

</div>

Bahasa Indonesia:

</div>

<h2>Kelola Perangkat IoT</h2>

<i class="fas fa-plus"></i> Tambah Perangkat

</tombol>

</div>

<p class="section-description">Kelola semua perangkat IoT yang terhubung ke sistem FarmerSmartAI.</p>

</div>

<h3>Sensor kelembaban #1</h3>

<span class="status-perangkat status-online">Online</span>

</div>

<p>Area Utara - Tanaman Padi</p>

</tombol>

</tombol>

</div>

</div>

<h3>Sensor Suhu #1</h3>

<span class="status-perangkat status-online">Online</span>

</div>

<p>Area Timur - Rumah Kaca</p>

</tombol>

</tombol>

</div>

</div>

<h3>Sensor Kelembapan Udara</h3>

<span class="status-perangkat status-online">Online</span>

</div>

<p>Area Selatan - Tanaman Sayur</p>

</tombol>

</tombol>

</div>

</div>

<h3>Sensor pH Tanah</h3>

<span class="status-perangkat status-offline">Offline</span>

</div>

<p>Area Barat - Tanaman Buah</p>

</tombol>

</tombol>

</div>

Bahasa Indonesia:

<h2>Integrasi Gerbang IoT</h2>

</div>

<label class="form-label" for="gatewayId">ID Gerbang</label>

<div class="form-text">ID unik untuk gateway IoT Anda.</div>

</div>

<label class="form-label" for="apiKey">Kunci API</label>

</tombol>

</tombol>

</div>

<div class="form-text">Gunakan API Key ini untuk integrasi dengan sistem eksternal.</div>

</div>

Bahasa Indonesia:

</div>

<h2>Integrasi Data Cuaca</h2>

</div>

<h3>Integrasi BMKG</h3>

<p>Ambil data cuaca dari Badan Meteorologi, Klimatologi, dan Geofisika</p>

</div>

</label>

</div>

<label class="form-label" for="weatherLocation">Lokasi Cuaca</label>

<div class="form-text">Lokasi untuk data cuaca yang lebih akurat.</div>

</div>

Bahasa Indonesia:

<h2>Integrasi Pasar</h2>

</div>

<h3>Harga Pasar Real-time</h3>

<p>Ambil data harga komoditas terbaru dari pasar terdekat</p>

</div>

</label>

</div>

<label class="form-label" for="marketPreference">Pasar Preferensi</label>

<option value="">Pilih pasar</option>

<option value="pasar-induk">Pasar Induk Jakarta</option>

<option value="pasar-bandung">Pasar Kosambi Bandung</option>

<option value="pasar-surabaya">Pasar Turi Surabaya</option>

</pilih>

</div>

Bahasa Indonesia:

</div>

<h2>Ubah Kata Sandi</h2>

</div>

<label class="form-label" for="currentPassword">Kata Sandi Saat Ini</label>

</div>

<label class="form-label" for="newPassword">Kata Sandi Baru</label>

<div class="form-text">Kata sandi harus minimal 8 karakter dan mengandung huruf besar, huruf kecil, dan angka.</div>

</div>

<label class="form-label" for="confirmPassword">Konfirmasi Kata Sandi Baru</label>

</div>

<i class="fas fa-key"></i> Ubah Kata Sandi

</tombol>

Bahasa Indonesia:

<h2>Sesi Aktif</h2>

</div>

<p>Anda saat ini login dari:</p>

<div>

<strong>Chrome di Windows</strong>

<div style="font-size: 0.9rem; color: var(--gray);">Jakarta, Indonesia - Sekarang</div>

</div>

<i class="fas fa-sign-out-alt"></i> Keluar

</tombol>

</div>

Bahasa Indonesia:

<h2>Hapus Akun</h2>

</div>

<p>Menghapus akun Anda akan menghapus semua data yang terkait dengan akun ini. Tindakan ini tidak dapat dibatalkan.</p>

<i class="fas fa-exclamation-triangle"></i> Hapus Akun Saya

</tombol>

</div>

Bahasa Indonesia:

</div>

<h2>Preferensi Bahasa & Wilayah</h2>

</div>

<label class="form-label" for="language">Bahasa</label>

<option value="id"select>Bahasa Indonesia</option>

<option value="en">Bahasa Inggris</option>

</pilih>

</div>

<label class="form-label" for="timezone">Zona Waktu</label>

</pilih>

</div>

<label class="form-label" for="dateFormat">Format Tanggal</label>

</pilih>

</div>

Bahasa Indonesia:

<h2>Preferensi Tampilan</h2>

</div>

<option value="light" selected>Tema Terang</option>

<option value="dark">Tema Gelap</option>

<option value="auto">Sistem Sesuai</option>

</pilih>

</div>

<h3>Konten Padat</h3>

<p>Menampilkan lebih banyak konten dalam satu layar dengan mengurangi jarak</p>

</div>

</label>

</div>

Bahasa Indonesia:

</div>

<i class="fas fa-undo"></i> Atur Ulang

</tombol>

<i class="fas fa-save"></i> Simpan Perubahan

</tombol>

</div>

<skrip>

// Inisialisasi saat halaman dimuat

dokumen.addEventListener('DOMContentLoaded', fungsi() {

setupTabs();

setupEventListeners();

// Alihkan menu seluler

const mobileMenuBtn = document.querySelector('.mobile-menu-btn');

const bilah sisi = document.querySelector('.sidebar');

jika (mobileMenuBtn) {

mobileMenuBtn.addEventListener('klik', fungsi() {

sidebar.style.display = sidebar.style.display === 'blok' ? 'none' : 'blok';

});

}

});

// Siapkan navigasi tab

fungsi setupTabs() {

const tabs = dokumen.querySelectorAll('.tab');

const tabContents = dokumen.querySelectorAll('.tab-content');

tab.untukSetiap(tab => {

tab.addEventListener('klik', fungsi() {

const tabId = this.getAttribute('data-tab');

// Hapus kelas aktif dari semua tab dan konten

tabs.forEach(t => t.classList.remove('aktif'));

tabContents.forEach(c => c.classList.remove('aktif'));

// Tambahkan kelas aktif ke tab dan konten saat ini

this.classList.add('aktif');

document.getElementById(`${tabId}-tab`).classList.add('aktif');

});

}

// Siapkan pendengar acara untuk berbagai kontrol

fungsi setupEventListeners() {

// Alihkan visibilitas Kunci API

const toggleApiKey = dokumen.getElementById('toggleApiKey');

const apiKeyInput = dokumen.getElementById('apiKey');

jika (toggleApiKey) {

toggleApiKey.addEventListener('klik', fungsi() {

const type = apiKeyInput.type === 'kata sandi' ? 'teks' : 'kata sandi';

apiKeyInput.type = jenis;

this.innerHTML = ketik === 'kata sandi' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';

});

}

// Salin Kunci API

const copyApiKey = dokumen.getElementById('copyApiKey');

jika (copyApiKey) {

copyApiKey.addEventListener('klik', fungsi() {

apiKeyInput.pilih();

document.execCommand('salin');

// Tampilkan umpan balik sementara

const originalText = ini.innerHTML;

ini.innerHTML = '<i class="fas fa-check"></i>';

aturWaktuhabis(() => {

this.innerHTML = teks asli;

}, 2000);

});

}

// Tombol simpan pengaturan

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

jika (simpanPengaturan) {

saveSettings.addEventListener('klik', fungsi() {

// Tampilkan status pemuatan

this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> menyimpan...';

ini.dinonaktifkan = benar;

// Simulasikan penundaan panggilan API

aturWaktuhabis(() => {

// Tombol reset

this.innerHTML = '<i class="fas fa-save"></i> Simpan Perubahan';

ini.dinonaktifkan = salah;

// Tampilkan pesan sukses

showAlert('success', 'Pengaturan berhasil disimpan!');

}, 1500);

});

}

// Tombol reset pengaturan

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

jika (resetSettings) {

resetSettings.addEventListener('klik', fungsi() {

if (confirm('Anda yakin ingin mengembalikan semua pengaturan ke nilai default? Tindakan ini tidak dapat dibatalkan.')) {

// Tampilkan status pemuatan

this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mereset...';

ini.dinonaktifkan = benar;

// Simulasikan proses reset

aturWaktuhabis(() => {

// Tombol Reset

this.innerHTML = '<i class="fas fa-undo"></i> Atur Ulang';

ini.dinonaktifkan = salah;

// Tampilkan pesan sukses

showAlert('success', 'Pengaturan berhasil direset ke nilai default!');

// Dalam aplikasi nyata, ini akan mengatur ulang semua nilai formulir

// Untuk demo, kita akan memuat ulang halamannya

aturWaktuhabis(() => {

lokasi.muat ulang();

}, 1000);

}

});

}

// Tombol hapus akun

const deleteAccountBtn = document.querySelector('.btn-danger');

jika (hapusBtnAkun) {

deleteAccountBtn.addEventListener('klik', fungsi() {

if (confirm('PERINGATAN: Anda akan menghapus akun Anda secara permanen. Semua data akan hilang dan tidak dapat memuaskan. Apakah Anda yakin?')) {

const password = prompt('Masukkan kata sandi Anda untuk konfirmasi:');

jika (kata sandi) {

// Tampilkan status pemuatan

this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menghapus...';

ini.dinonaktifkan = benar;

// Simulasikan proses penghapusan akun

aturWaktuhabis(() => {

alert('Akun berhasil dihapus. Anda akan dialihkan ke halaman beranda.');

lokasi jendela.href = 'indeks.html';

}, 2000);

}

});

}

// Tampilkan pesan peringatan

fungsi showAlert(tipe, pesan) {

const peringatan = dokumen.getElementById(`${type}Peringatan`);

const messageElement = dokumen.getElementById(`${type}Pesan`);

jika (peringatan dan elemen pesan) {

messageElement.textContent = pesan;

alert.style.display = 'blok';

// Sembunyikan otomatis setelah 5 detik

aturWaktuhabis(() => {

alert.style.display = 'tidak ada';

}, 5000);

// Gulir untuk memberi peringatan

alert.scrollIntoView({ perilaku: 'halus', blok: 'tengah' });

}

// Simulasikan pembaruan status perangkat secara real-time

fungsi updateDeviceStatus() {

const statusElements = document.querySelectorAll('.device-status');

statusElements.forEach(status => {

// 5% kemungkinan untuk mengubah status (untuk tujuan demo)

jika (Matematika.acak() < 0,05) {

jika (status.classList.berisi('status-online')) {

status.classList.remove('status-online');

status.classList.add('status-offline');

status.textContent = 'Offline';

} kalau tidak {

status.classList.remove('status-offline');

status.classList.add('status-online');

status.textContent = 'Online';

}

});

}

// Perbarui status perangkat setiap 30 detik

setInterval(perbaruiStatusPerangkat, 30000);

</skrip>

</tubuh>

Bahasa Indonesia: </html>

```

Fitur Halaman Settings:

1. Sistem Tab Navigasi - 6 tab pengaturan yang terorganisir:

· Akun & Profil

· Notifikasi

· Perangkat IoT

· Integrasi

· Keamanan

· Preferensi

2. Pengaturan Akun & Profil:

· Informasi pribadi dan lahan

· Unggah dan kelola foto profil

· Data kontak dan lokasi

3. Sistem Notifikasi:

· Beralih untuk berbagai jenis notifikasi

· Pengaturan saluran notifikasi (email, browser, SMS)

· Preferensi untuk peringatan cuaca, rekomendasi AI, dll.

4. Manajemen Perangkat IoT:

· Dashboard perangkat sensor yang terhubung

· Status online/offline waktu nyata

· Manajemen API Key dan Gateway

5. Integrasi Sistem:

· Koneksi data cuaca dari BMKG

· Integrasi harga pasar secara real-time

· Pengaturan preferensi pasar

6. Keamanan Akun:

· Ubah kata sandi dengan validasi

· Manajemen sesi aktif

· Opsi penghapusan akun

7. Preferensi Pengguna:

· Pengaturan bahasa dan wilayah

· Preferensi tampilan dan tema

· Format tanggal dan zona waktu

8. Fitur Interaktif:

· Alihkan tombol untuk berbagai opsi

· Tombol simpan dan reset dengan umpan balik

· Pesan peringatan untuk konfirmasi

· Status perangkat IoT waktu nyata

Halaman ini memberikan kontrol penuh kepada pengguna untuk menyesuaikan pengalaman menggunakan FarmerSmartAI sesuai dengan preferensi dan kebutuhan spesifik mereka.

Bersambung ke: Kode Isi File 𝗌𝗍𝗒𝗅𝖾.𝖼𝗌𝗌

Search This Blog

Aplikasi FarmerSmartAI

Kode Isi File settings.html

Comments

Post a Comment

Popular posts from this blog

logo-placeholder.html

Aplikasi FarmerSmartAI:

icon-generator.html