PROMPT WEBSITE PULMO BAND
Buatlah desain antarmuka (UI/UX) dashboard website medis profesional, modern, dan futuristik untuk platform “Pulmo Band”, sebuah sistem skrining dini Penyakit Paru Obstruktif Kronis (PPOK) berbasis wearable photoplethysmography (PPG) triple panjang gelombang yang dipadukan dengan Artificial Intelligence (AI) untuk menganalisis pola napas secara real-time pada remaja. Website mengusung konsep minimalis-healthcare, clean, modern, dan mudah dipahami oleh remaja maupun tenaga kesehatan.
Gunakan palet warna dominan putih, biru muda (sky blue), teal, dan aksen emerald green sebagai simbol kesehatan paru, dengan sentuhan orange untuk status waspada serta merah untuk kondisi yang memerlukan konsultasi medis. Terapkan efek glassmorphism, soft shadow, rounded corner, floating cards, smooth animation, micro-interaction, serta gradient transparan agar tampilan terasa futuristik namun tetap profesional seperti dashboard perangkat medis premium.
Dashboard dibuat fully interactive layaknya aplikasi kesehatan nyata dengan tampilan data yang diperbarui secara real-time.
Dashboard Utama
Pada halaman utama tampilkan visualisasi gelang Pulmo Band yang sedang terhubung melalui Bluetooth ke smartphone dengan animasi sinkronisasi data secara langsung.
Di bagian atas dashboard tampilkan status koneksi Bluetooth, persentase baterai gelang, status sinkronisasi, serta nama pengguna.
Tampilkan empat kartu informasi utama (Health Cards):
Setiap kartu memiliki indikator warna:
Gunakan gauge meter futuristik berbentuk lingkaran untuk Heart Rate dan SpO₂.
Breathing Pattern ditampilkan dalam bentuk AI respiratory waveform yang bergerak secara live mengikuti pola napas pengguna.
⸻
Live Respiratory Analysis
Buat panel besar yang menampilkan:
Grafik harus tampak hidup dengan animasi halus seolah menerima data sensor secara langsung dari gelang.
Tambahkan tulisan:
AI Respiratory Analysis Running…
beserta indikator loading kecil berwarna biru.
⸻
AI Classification Panel
Tambahkan panel khusus hasil analisis AI.
Isi panel berupa:
Current Assessment
Normal Respiratory Pattern
atau
Possible Early COPD Pattern Detected
sertai confidence score AI misalnya
97.3%
Tambahkan progress bar confidence.
Jika pola napas abnormal muncul terus menerus maka tampilkan kartu peringatan dengan efek glow merah:
⚠ Early Warning
Abnormal breathing pattern detected consistently.
Recommendation:
Please consult a healthcare professional.
⸻
Wearable Device Information
Tambahkan ilustrasi Pulmo Band dalam bentuk 3D render.
Di sampingnya tampilkan spesifikasi:
⸻
User Profile Setup
Tambahkan halaman onboarding pertama.
User diminta mengisi:
Data tersebut akan digunakan AI untuk personalisasi analisis.
Gunakan progress wizard modern dengan animasi.
⸻
Health History
Buat halaman riwayat kesehatan.
Tampilkan line chart interaktif untuk:
Pengguna dapat memilih:
Grafik harus dapat di-zoom dan di-hover.
Tambahkan insight otomatis AI misalnya:
“Respiratory pattern remained stable for the past 14 days.”
atau
“Increasing respiratory irregularities detected over the last week.”
⸻
Daily Lung Education
Tambahkan halaman edukasi yang modern.
Berisi beberapa kartu:
Daily Lung Fact
Healthy Lifestyle Tips
Smoking Prevention
Respiratory Exercise
Kenali Paru-Parumu
Setiap kartu dapat diklik dan membuka pop-up interaktif berisi:
Tambahkan progress belajar sehingga pengguna dapat melihat persentase edukasi yang telah diselesaikan.
⸻
Emergency Recommendation
Jika AI mendeteksi pola abnormal secara konsisten, munculkan halaman rekomendasi otomatis.
Isi halaman:
⚠ Early Warning Notification
AI has detected persistent abnormal respiratory patterns.
Recommended Actions:
Gunakan tombol besar dengan ikon medis modern.
⸻
Security & Privacy
Tambahkan halaman khusus keamanan data.
Visualisasikan konsep:
Wearable Device
↓
Federated Learning
↓
Encrypted AI Model Update
↓
Cloud AI
Gunakan animasi alur data.
Tambahkan ikon:
Berikan penjelasan singkat bahwa data detak jantung, SpO₂, dan pola napas tetap berada di perangkat pengguna dan hanya parameter model AI yang dikirim untuk pembaruan sistem.
⸻
Navigation
Desktop:
Sidebar modern berisi:
Mobile:
Bottom Navigation:
Dashboard
History
Education
Profile
⸻
Overall Design Style
Gunakan gaya desain seperti perpaduan antara:
dengan nuansa futuristik, clean, premium, dan mudah digunakan oleh remaja.
Gunakan font sans-serif modern seperti Inter, SF Pro Display, atau Poppins, ikon outline minimalis, ilustrasi paru-paru 3D, animasi waveform pernapasan, efek kaca (glassmorphism), soft gradient biru-teal, floating cards, dan dashboard medis yang tampak hidup melalui pembaruan data real-time. Seluruh antarmuka harus responsif untuk desktop, tablet, dan smartphone, dengan pengalaman pengguna yang intuitif, profesional, dan memberikan kesan teknologi kesehatan masa depan.