MikroTik Login — Image Slider
A phone-first MikroTik captive portal for a public Wi-Fi provider in Aden, Yemen, with an animated image-slider background.
01 Overview
A MikroTik hotspot captive-portal login page for a public Wi-Fi provider in Aden, Yemen. Fully RTL (Arabic) with a phone-first layout (max 430px), dark theme with warm-tone cream #d4bc99ff and brown #8C4A1D accents. It features an image slider background that transitions with an animated slide-push. It replaces MikroTik's default portal with a branded flow covering voucher + member login, price plans, dealer locations, session status, success/error/logout pages, and Arabic-translated MikroTik error messages.
02 Problem
MikroTik's default captive portal looks generic, English-only, not mobile-friendly, and doesn't reflect the ISP owner's branding.
03 Solution & Approach
Built with pure HTML/CSS/JS fully compatible with MikroTik RouterOS MiniHTTP hotspots. Two login modes — voucher and member — toggled via toggleMember(), on the MikroTik usernamekv/passwordkv form with md5.js as CHAP fallback ($(chap-id) + $(chap-challenge)). The background is an image slider — a slide-push animation alternating between backgroundhp1.jpg ↔ backgroundhp2.jpg. Dynamic content (prices & locations) is rendered client-side from JSON files via fetch.
04 Key Features
- Voucher & member login — toggle voucher ↔ member with JS validation.
- Automatic price page from harga.json in Yemeni Rial.
- Official dealer locations in Aden from locations.json (9 neighborhoods).
- Session status — active badge, IP, uptime; unlimited → "غير محدود".
- Success login page with check animation (popIn) & 10-second countdown.
- MikroTik error translation into Arabic (user not found, invalid password, limits, already logged in).
- Phone-first design — 430px phone-frame layout, image-slider background with slide-push animation.