mars-ems

byMuh Nur Hidayah

anduan Gaya Desain (Design System) Warna Latar Utama: Dark Mode / Slate Dark (#0F172A) Warna Kartu/Kontainer: Slate Container (#1E293B) dengan stroke border (#334155) Teks Utama: Putih (#F8FAFC), Teks Sekunder/Muted (#94A3B8), Angka Metrik (#38BDF8) Warna Indikator Status: Hijau Aktif/Aman (#16A34A), Kuning Peringatan (#FACC15), Merah Kritis/Load Shedding (#EF4444) Jenis Font: Sans-serif (Inter atau Roboto) Rincian Komponen UI (Atas ke Bawah) 1. Header / Top Navigation Bar Posisi Kiri: Teks "⚡ Smart Micro-Grid Dashboard" (Teks Tebal, 18px, Putih). Posisi Kanan (Badge Status): Badge Status 1: "ESP32: ONLINE" (Kotak tumpul/pill, Fill Hijau #16A34A, Teks Putih 11px Bold). Badge Status 2: "MODE: AUTO (AI)" (Kotak tumpul/pill, Fill Biru #0284C7, Teks Putih 11px Bold). 2. Baris Kartu Telemetri Real-Time (3 Kolom Sejajar) Kartu 1 (Panel Surya): Judul Kartu: "PANEL SURYA" (Teks Muted #94A3B8, 12px Bold) Angka Metrik Utama: "0.91 W" (Teks Biru #38BDF8, 28px Bold) Keterangan Detail: "5.10 V | 180 mA" (Teks Abu-abu #CBD5E1, 12px) Kartu 2 (Kondisi Baterai - SoC): Judul Kartu: "KONDISI BATERAI (SOC)" (Teks Muted #94A3B8, 12px Bold) Angka Metrik Utama: "78%" (Teks Hijau #4ADE80, 28px Bold) Keterangan Detail: "Tegangan: 3.95 V (Aman)" (Teks Abu-abu #CBD5E1, 12px) Kartu 3 (Sensor Lingkungan): Judul Kartu: "SENSOR LINGKUNGAN" (Teks Muted #94A3B8, 12px Bold) Angka Metrik Utama: "650 W/m²" (Teks Kuning #FACC15, 28px Bold) Keterangan Detail: "Suhu: 31.5 °C (Terik)" (Teks Abu-abu #CBD5E1, 12px) 3. Banner Mesin AI & Keputusan EMS (Kontainer Lebar Penuh) Latar Belakang: Ungu/Indigo Tua (#312E81) dengan border Indigo (#6366F1). Header Kiri: "🤖 SMART ENGINE (Random Forest & EMS)" (Teks Indigo Muda #A5B4FC, 14px Bold). Badge Kanan: "⚠️ PREDIKSI PENURUNAN DAYA" (Pill Merah #EF4444, Teks Putih 11px Bold). Baris Informasi 1: "Prediksi Pasokan Daya (2 Jam Ke Depan): 0.25 Watt" (Teks Putih, Angka Biru #38BDF8 Bold). Baris Informasi 2: "Status Keputusan: Predictive Load Shedding Active" (Teks Kuning #FBBF24 Bold). Keterangan Aksi: "Aksi Sistem: Mematikan Beban Sekunder (Kipas DC) secara proaktif agar Beban Utama (LED) tetap mendapat pasokan daya." (Teks Abu-abu Muda #CBD5E1, 12px). 4. Area Bawah (Terbagi 2 Kolom) Kolom Kiri: Panel Kontrol Sakelar (Relay) Judul Panel: "🎛️ PANEL KONTROL SAKELAR (RELAY)" (Teks 13px Bold). Status Mode: "● Mode Otomatis (AI Engine Active)" (Teks Biru 12px). Garis Pemisah Horizontal (Divider). Baris Relay 1: Teks "Relay 1: Lampu LED (Utama)" + Tombol Badge "ON" (Warna Hijau #22C55E, Teks Putih Bold). Baris Relay 2: Teks "Relay 2: Kipas DC (Sekunder)" + Tombol Badge "OFF (AI)" (Warna Merah #EF4444, Teks Putih Bold). Kolom Kanan: Log Aktivitas Sistem (Terminal Box) Judul Panel: "📋 LOG AKTIVITAS SISTEM" (Teks 13px Bold). Kotak Terminal: Latar Hitam Pekat (#020617), Font Monospace 11px. Isi Baris Log: [14:10:05] ESP32 kirim telemetri: V=5.1V, I=180mA (Teks Abu-abu) [14:10:07] RF prediksi daya turun 40% (Teks Abu-abu) [14:10:08] EMS Load Shedding: Relay 2 OFF (Teks Merah #F87171) [14:10:10] Relay 1 tetap dijaga ON (Teks Hijau #4ADE80) Penyesuaian untuk Layar HP (Mobile PWA 390px) Ubah tata letak 3 Kartu Telemetri menjadi 1 kolom vertikal ditumpuk ke bawah. Ubah area bawah 2 kolom menjadi 1 kolom (Panel Kontrol Relay di posisi atas, Log Aktivitas di posisi bawah).