Login MikroTik — Glassmorphism Warm Tone
Captive portal MikroTik branded, RTL penuh Arab, untuk penyedia layanan wifi di Aden, Yaman.
01 Ringkasan
Halaman login captive portal MikroTik untuk layanan wifi publik, dirancang RTL full (Arab) dengan tema glassmorphism warm-tone (krem/cokelat). Menggantikan tampilan default MikroTik yang generik dengan portal yang branded: login voucher, daftar harga paket, lokasi penjualan, status sesi, halaman sukses/error/logout, plus terjemahan pesan error MikroTik ke Bahasa Arab.
02 Problem
Halaman login default MikroTik tampak generik, berbahasa Inggris, tidak responsif, dan tidak mencerminkan branding ISP pemilik jaringan.
03 Solusi & Pendekatan
Dibangun dengan HTML/CSS/JS vanilla yang 100% kompatibel dengan MiniHTTP / hotspot MikroTik RouterOS. Autentikasi memakai CHAP via MD5 untuk mengirim username + password ter-hash dengan $(chap-id) + $(chap-challenge). Alur captive-portal standar MikroTik dari redirect → login → status → logout, plus radvert dan api.json profil captive (WISPr). Konten dinamis (harga & lokasi) dirender dari file JSON via fetch.
04 Fitur Utama
- Login voucher dengan validasi JS dan fallback CHAP/MD5.
- Halaman harga otomatis dari harga.json.
- Lokasi penjualan dari locations.json dengan live search + tombol Maps/WhatsApp.
- Status sesi — IP, uptime, sisa kuota/waktu, konversi unlimited → "غير محدود".
- Halaman sukses login dengan animasi centang & countdown.
- Terjemahan pesan error MikroTik ke Bahasa Arab (invalid password, limit, already logged in, dll).
- Desain glassmorphism mobile-first, aset lokal tanpa ketergantungan CDN.