MikroTik Login — Glassmorphism Warm Tone
A branded MikroTik captive portal, fully Arabic RTL, for a Wi-Fi provider in Aden, Yemen.
01 Overview
A customizable MikroTik hotspot captive-portal login page for a public Wi-Fi service, fully RTL (Arabic) with a warm-tone glassmorphism theme. It replaces MikroTik's generic captive portal with a branded flow covering voucher login, price plans, dealer locations, live session status, success/error/logout pages, and Arabic translation of 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. Authentication uses CHAP via MD5 to send hashed username + password with $(chap-id) and $(chap-challenge). The standard MikroTik captive flow from redirect → login → status → logout, plus radvert and api.json (WISPr). Dynamic content (prices & locations) is rendered client-side from JSON files via fetch.
04 Key Features
- Voucher login with JS validation and CHAP/MD5 fallback.
- Automatic price page driven by harga.json.
- Dealer locations from locations.json with live search + Maps/WhatsApp buttons.
- Session status — IP, uptime, remaining quota/time, unlimited → "غير محدود".
- Success login page with check animation & countdown.
- MikroTik error translation into Arabic (invalid password, limits, already logged in, etc).
- Glassmorphism mobile-first design, local assets with no CDN dependency.