diff --git a/README.md b/README.md index 2c6f57a..daf0deb 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,88 @@ -# Twinpath Hotspot Themes 🎨📶 +
+ TwinpathNet Logo +
+

TwinpathNet Hotspot Theme

+

A high-performance, Vercel-inspired Mikrotik Hotspot template designed for modern ISPs.

-Professional, modern, and multi-themed captive portal templates for MikroTik Hotspot. - -## ✨ Features -- **Dynamic Branching**: Every branch in this repository represents a different theme/variant. -- **Premium Aesthetics**: Dark modes, vibrant accents, and modern typography. -- **Multi-language Support**: Built-in Indonesian (ID) and English (EN) localization. -- **QR Code Connectivity**: Integrated QR scanner for quick login from vouchers. - -## 🚀 How to Use - -### 1. Choose Your Theme -Check out the available branches to find the theme that suits your brand: -- `theme/modern-dark` (Current active theme: Vercel-style dark with teal accents) - -### 2. Implementation -It is highly recommended to use a specific **Tag** for a stable release: - -1. Clone using a stable tag (e.g., `v1.0-dark`): - ```bash - git clone --branch v1.0-dark https://github.com/dyzulk/twinpath-hotspot-themes.git - ``` -2. Or, if you want the latest (possibly experimental) version of a branch: - ```bash - git clone -b theme/modern-dark https://github.com/dyzulk/twinpath-hotspot-themes.git - ``` -3. Upload the contents of the folder to your MikroTik **`flash/hotspot`** directory. - -## 📁 Repository Structure -Each branch is self-contained. To switch themes in your local development: -```bash -git checkout theme/[branch-name] -``` - -## 🛠️ Customization -Edit `js/config.js` to change branding, URLs, and basic settings without touching the core HTML/CSS. +

+ + Release + + + Mikrotik + + + Design System + + + License + +

+
--- -Developed with ❤️ by [dyzulk](https://github.com/dyzulk) + +## ✨ Features + +### 🎨 **Vercel-Inspired UI** +Built with a sleek, dark-mode-first prioritization. Minimalist aesthetics that focus on content and typography, providing a premium feel for end-users. + +### 🛡️ **Advanced Security** +- **API Hardening**: Automatically hides details of unused vouchers (0 uptime/bytes) to prevent enumeration attacks. +- **Form Isolation**: 'Info Check' logic is physically separated from the main login form, preventing accidental logins. +- **Input Guard**: Native `Enter` key handling preventing unwanted form submissions. + +### ⚡ **Smart QR Scanner** +- **Context-Aware**: Intelligently switches between "Login Mode" and "Check Status Mode". +- **Fast Path**: Instantly processes scanned codes without unnecessary confirmation dialogs when checking status. +- **Auto Cleanup**: Modals automatically close when switching tabs or pressing `Escape`. + +### 🌐 **Multi-Language Support** +- **Native Localization**: Built-in JSON-based translation engine (ID/EN). +- **Auto-Detect**: Remembers user preference via LocalStorage. + +--- + +## 🚀 Installation + +1. **Download Release** + Grab the latest `.zip` from the [Releases Page](https://github.com/dyzulk/twinpath-hotspot-themes/releases). + +2. **Drag & Drop** + Extract the folder and upload it to your Mikrotik's `Files` menu via Winbox or FTP. + +3. **Configure Profile** + Go to `IP > Hotspot > Server Profiles`, select your profile, and point `HTML Directory` to the uploaded folder. + +--- + +## 🛠️ Configuration + +Open `js/config.js` to customize your brand: + +```javascript +const brandConfig = { + brandName: "TwinpathNet", + portalUrl: "http://h.twinpath.net", // Your Hotspot DNS Name + mikhmonUrl: "https://mikhmon.dyzulk.com", // Your Mikhmon API URL + mikhmonSession: "Twinpath-Net" // Your Mikhmon Session Name +}; +``` + +--- + +## 📸 Screenshots + +
+ Login Screen + Voucher Check +
+ +--- + +
+

Crafted with ❤️ by @dyzulk

+

+ Powered by Mikrotik & Vanilla JS +

+