cosmic-alumni

byIrfan 1124

Buatkan aplikasi web Single Page Application (SPA) untuk "SIDIK Rayon IKSASS PROMAL" (Sistem Informasi Database IKSASS khusus wilayah Pasuruan, Probolinggo, Malang, Lumajang). Design Style & UI Theme: - Layout clean, profesional, dan responsive (Mobile-first). - Kombinasi warna: Hijau Islami/IKSASS (Emerald/Forest Green) sebagai warna utama, putih/light gray untuk background, dan aksen oranye lembut untuk tombol aksi sekunder. - Sentuhan Glassmorphism modern pada card/container (backdrop-blur, border semi-transparan, soft shadow). Struktur Halaman terdiri dari 3 Langkah/Halaman Utama (Navigation/Tabs): 1. Halaman 1: Formulir Pendaftaran Alumni - Header: Logo IKSASS & Judul "Pendaftaran Alumni P2S3 - Rayon PROMAL". - Form Input: * Dropdown Sub-Rayon: Pasuruan, Probolinggo, Malang, Lumajang. * Input Teks: NIK, Nama Lengkap, Tempat Lahir, Tanggal Lahir, No. Telp/WA. * Dropdown Alamat Domisili: Provinsi (Default: Jawa Timur), Kabupaten/Kota (Pasuruan, Probolinggo, Malang, Lumajang), Kecamatan, Desa. * Textarea: Alamat Lengkap. * Dropdown Riwayat Santri: Tahun Masuk Mondok & Tahun Keluar Mondok. * File Upload: Unggah Pasfoto Diri. * Checkbox: "Dengan ini saya menyatakan bahwa data ini benar." * Tombol Utamanya: "Kirim Pendaftaran" (Warna Hijau). * Link Alt: "Sudah daftar? Login". 2. Halaman 2: Halaman Login / Member Area - Header & Branding: Logo IKSASS dengan ucapan "Selamat Datang - Silahkan masukkan username dan password anda." - Form Input: * Username atau Email / No. WA * Password - Tombol Utama: "Login" (Warna Hijau full width). - Link Bantuan: "Lupa password? Klik Disini" dan "Belum punya akun? Klik Untuk Daftar". 3. Halaman 3: Dashboard Profil Alumni Terverifikasi - Header: Sapaan "Halo [Nama Alumni] - Selamat datang di halaman member area SIDIK PROMAL" + Banner IKSASS. - Layout 2 Kolom (Desktop) / Stacked (Mobile): * Kolom Kiri (Card Profil Ringkas): - Foto Profil + Badge Hijau "TELAH DIVERIFIKASI". - NIK (Format ter-sensor: 3512**************). - Alamat Ringkas. - Social Media Links (Instagram, Twitter, Facebook). * Kolom Kanan (Formulir Detail Data Alumni): - Badge Top: "RAYON IKSASS PROMAL". - Tombol Oranye Top-Right: "Perbaharui Data". - Grid Data Detail: NIK KTP, Nama Lengkap, Tempat Tanggal Lahir, No. Telp/WA, Status Nikah, Alamat Lengkap Domisili, Pekerjaan, Tahun Masuk/Keluar Pesantren, Keterangan Rekom, Tanggungan Keluarga, Pendidikan Terakhir, dan Pengalaman Organisasi. Tech Stack yang digunakan: - HTML5, Pure JavaScript, dan Tailwind CSS. - Komponen icons menggunakan Lucide Icons atau FontAwesome. - Gunakan kode modular dalam satu berkas HTML/SPA yang rapi dan siap dijalankan.