Login MikroTik — Image Slider
Captive portal MikroTik phone-first untuk jaringan wifi publik penyedia layanan di Aden, Yaman, dengan latar belakang image slider.
01 Ringkasan
Halaman login captive portal MikroTik untuk jaringan wifi publik penyedia layanan di Aden, Yaman. Dirancang RTL full (Arab) dengan tampilan phone-frame (mockup HP, max 430px) bertema gelap dengan aksen warm-tone krem #d4bc99ff dan cokelat #8C4A1D. Menampilkan image slider pada latar belakang yang berganti secara animasi (slide-push). Menggantikan portal default MikroTik dengan alur branded: login voucher + mode member, daftar harga paket, lokasi agen, 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. Ada dua mode login: voucher dan member (toggle via toggleMember()), form MikroTik prototipe usernamekv/passwordkv dengan md5.js sebagai fallback CHAP ($(chap-id) + $(chap-challenge)). Latar belakang menampilkan image slider — animasi slide-push yang bergantian antara backgroundhp1.jpg ↔ backgroundhp2.jpg. Konten dinamis (harga & lokasi) dirender dari JSON via fetch.
04 Fitur Utama
- Login voucher & member — toggle voucher ↔ member dengan validasi JS.
- Halaman harga otomatis dari harga.json dalam Rial Yaman.
- Lokasi agen resmi di Aden dari locations.json (9 wilayah).
- Status sesi — badge aktif, IP, uptime; konversi unlimited → "غير محدود".
- Halaman sukses login dengan animasi centang ( popIn) & countdown 10 detik.
- Terjemahan pesan error MikroTik ke Arab (user not found, invalid password, limit, already logged in).
- Tampilan phone-first — layout phone-frame 430px, background image slider dengan animasi slide-push.